SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery optimised chaining

    Hi I have just written some jQuery code that had to navigate to a parent sibling then 3rd child

    my code was

    $(this).parent().next('ul').children('li').children('span').children('input').attr('checked', 'checked');

    I was wondering if there is any way to optimise this I thought this would work

    $(this).parent().next('ul').children('li span input').attr('checked', 'checked');

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends if you have any other inputs in your list besides those you are checking. For example you could like this if you want to check any input element in the list:
    Code:
    $(this).parent().next('ul').find('input').attr('checked', 'checked');
    If you can post your piece of code related to this query, it will be easier to suggest something more.

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is a unordered list of checkboxes and then sub lists of checkboxes too. There could be x number of list items in the top level list or sub lists but only one level of depth.

    It is structured like this:

    Code:
    <li>
        <span>
            <a href="javascript://">Expand / Collapse</a>
            <input type="checkbox" name="checkBoxMarital" id="checkBoxMarital" />
            <label for="checkBoxMarital">Marital Status</label>
        </span>
        <ul>
            <li>
                <span>
                    <input type="checkbox" name="checkBoxMaritalSingle" id="checkBoxMaritalSingle" />
                    <label for="checkBoxMaritalSingle">Single</label>
                </span>                                                            
            </li>

  4. #4
    SitePoint Addict chestertondevelopment's Avatar
    Join Date
    Dec 2005
    Location
    Essex, UK
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you need to make sure that the input is in the list and then span the most efficient way would be...
    Code:
    $(this).parent().find('ul > li > span > input').attr('checked', 'checked');
    Is there any reason why you can't just do the following though?
    Code:
    $(this).parent().find('ul input').attr('checked', 'checked');

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    Thats a pretty nice short cut, I have not used find before.

    Does the > operator work in other tags like

    Code:
    .parent('ul > li')

  6. #6
    SitePoint Addict chestertondevelopment's Avatar
    Join Date
    Dec 2005
    Location
    Essex, UK
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, it should work with anything, it's equivalent to the > CSS selector in that it looks for the direct child of the tag.

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The most optimized way to get input elements in your example would be
    Code:
    $(this).parent().next().find('input').attr('checked', 'checked');
    If you need some restrictions like 'input' should be inside of 'span', just add only those that really required, because each additional restriction will add time to function execution.


Tags for this Thread

Bookmarks

Posting Permissions

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