Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts

    jQuery get attributes of child elements

    I'm trying to get the child attributes of the unordered list. The loop goes through them all, but displays a blank on the alert for the type, and an undefined for the checked attribute.


    Code:
    $("[class="+target_name+"]").children().each(
                      function(){
                         alert($(this).attr('type'));
                            if ($(this).attr('checked')){
                                $(this).show();
                                $('input',$(this)).show();    
                            }                                                                                                     
                            else{
                                $(this).hide();
                                $('input',$(this)).hide();
                            }
                       }
    
    );

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    try this

    Code:
    $("."+target_name).children().each(
                      function(){
                         alert($(this).attr('type'));
                            if ($(this).attr('checked')){
                                $(this).show();
                                $('input',$(this)).show();    
                            }                                                                                                     
                            else{
                                $(this).hide();
                                $('input',$(this)).hide();
                            }
                       }
    
    );

  • #3
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts
    Doing it that way, it does not loop through at all. Markup is below:

    Code:
    <ul id="group-listing"> 
    <? $groups = $course->getCourseGroups(); ?> 
    <? $students_list = array(); ?> 
    <? $students_list = Student::getStudentsFromCourse($course->id); ?> 
    
    <? if ($group_len = count($groups)): ?> 
        <? for ($j = 0; $j < $group_len; ++$j): ?> 
            <li><input type="checkbox" class="group" name="group-<?= $groups[$j]['id'] ?>"> <?= $groups[$j]['name'] ?> Members</li> 
            <? if ($student_len = count($students_list)): ?> 
                <ul class="student-list group-<?= $groups[$j]['id'] ?>"> 
                    <? for ($k=0; $k < $student_len; $k++){ 
                        $students_in_group = explode(',', $groups[$j]['students_short']); 
                                                                                                                  if (in_array($students_list[$k]->getId(), $students_in_group)){ 
                               echo "<li><input type='checkbox' name='$students_list[$k]->getId()' checked='checked'> " . $students_list[$k]->getName() . "</li>"; 
                                                                                                                   } 
                                                                                                                   else{ 
                               echo "<li><input type='checkbox' name='$students_list[$k]->getId()' style='display:none;'> <div id='studentshow_$i' style='display:none;'>" . $students_list[$k]->getName() . "</div></li>"; 
                                                                                                                   } 
                                                                                               } // end for k loop 
                                                                                           ?> 
                    <li class="edit-buttons"><div class="button-container"><a class="button"><span name="saveGroup" rel="<?= $groups[$j]['id'] ?>">Save</span></a> <a class="button"><span name="deleteGroup" rel="<?= $groups[$j]['id'] ?>">Delete</span></a> <a class="button"><span name="editGroup" rel="<?= $groups[$j]['id'] ?>">Edit</span></a> </div> <br></li> 
                </ul> 
            <? else: ?> 
                <ul class="student-list group-<?= $groups[$j]['id'] ?>"> 
                    <li class="edit-buttons"><div class="button-container"><a class="button"><span name="saveGroup" rel="<?= $groups[$j]['id'] ?>">Save</span></a> <a class="button"><span name="deleteGroup" rel="<?= $groups[$j]['id'] ?>">Delete</span></a></div> <br></li> 
                </ul> 
            <? endif; ?> 
        <? endfor; ?> 
    <? else: ?> 
        <li>There are no groups in this course</li> 
    <? endif; ?> 
    </ul>

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I think you are finding the ul element via:

    Code:
    $("[class="+target_name+"]").
    Then

    Code:
    $("."+target_name).children().each(
    will find direct child elements of the ul - which are the li elements. The type attributes I assume you want are on the input element, not the li, and this is why your alert doesn't return a value even though it goes through all the list items correctly.

    Changing your each() to:

    Code:
    $("."+target_name).find('input').each(
    should do the trick.
    Last edited by SB65; 05-21-2011 at 08:16 AM.

  • #5
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by SB65 View Post
    I think you are finding the ul element via:

    Code:
    $("[class="+target_name+"]").
    Then

    Code:
    $("."+target_name).children().each(
    will find direct child elements of the ul - which are the li elements. The type attributes I assume you want are on the input element, not the li, and this is why your alert doesn't return a value even though it goes through all the list items correctly.

    Changing your each() to:

    Code:
    $("."+target_name).find('input').each(
    should do the trick.
    There is a checkbox and an input within each child element. I want to check if the checkbox is checked on each child element, show the related input element next to it.

  • #6
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts
    A better way to say it is I want to get the checkbox checked status in the current <li> of the child element that we are on.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Code:
    $("."+target_name).find('input').each(
    function(){
    console.log($(this).is(':checked'));
    });
    })
    will output the state of each checkbox to the console - assuming each li has an inout of type checkbox.

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Find all the checkboxes within a class and show or hide the next (sibling) input?
    Code:
    $("."+target_name +" input:checkbox").each( function() {
        if ($(this).attr('checked')) {
            $(this).show();
            $(this).nextAll('input').eq(0).show();
        }
        else {
            $(this).hide();
            $(this).nextAll('input').eq(0).hide();
        }
    });
    Last edited by AndrewGSW; 05-23-2011 at 08:06 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts
    Here is a simpler version of what I'm trying to do. For every <li> that has a checkbox that is checked, show all it's contents (checkbox and text next to it), else, hide all it's contents (checkbox and text next to it). Also, the answer is yes to your question, every <li> item has both a checkbox and text.

    Code:
    <ul>
    <li><input type='checkbox' name='checkbox1'> Name 1</li>
    <li><input type='checkbox' name='checkbox2'> Name 2</li>
    <li><input type='checkbox' name='checkbox3'> Name 3</li>
    <li><input type='checkbox' name='checkbox4'> Name 4</li>
    <li><input type='checkbox' name='checkbox5'> Name 5</li>
    </ul>
    Last edited by mathceleb; 05-23-2011 at 08:47 PM.

  • #10
    Regular Coder
    Join Date
    Mar 2010
    Posts
    235
    Thanks
    39
    Thanked 6 Times in 6 Posts
    I finally got this to work after a few headaches. Code is below:

    Code:
    $("[class="+target_name+"]").find('input').each(
                      function(){
                            if ($(this).attr('checked')){
                                $(this).show();
                                $('input',$(this)).show();    
                            }                                                                                                     
                            else{
                                $(this).parent().hide();
                            }
                       }
    
    );


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •