SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation jQuery: having problems dealing with parents

    I have an ordered multi level list like this:
    Code:
    <ol>
       <li><a href="#">Option 1</a>
          <ol>
             <li><a href="#">Option 1.1</a></li>
             <li><a href="#">Option 1.2</a></li>
             <li><a href="#">Option 1.3</a>
                <ol>
                   <li><a href="#">Option 1.3.1</a></li>
                   <li><a href="#">Option 1.3.2</a></li>
                   <li><a href="#">Option 1.3.3</a></li>
                   <li><a href="#">Option 1.3.4</a></li>
                </ol>
             </li>
             <li><a href="#">Option 1.4</a></li>
             <li><a href="#">Option 1.5</a></li>
          </ol>
       </li>
       <li><a href="#">Option 2</a>
          <ol>
             <li><a href="#">Option 2.1</a></li>
             <li><a href="#">Option 2.2</a></li>
             <li><a href="#">Option 2.3</a>
                <ol>
                   <li><a href="#">Option 2.3.1</a></li>
                   <li><a href="#">Option 2.3.2</a></li>
                   <li><a href="#">Option 2.3.3</a></li>
                   <li><a href="#">Option 2.3.4</a></li>
                </ol>
             </li>
             <li><a href="#">Option 2.4</a></li>
             <li><a href="#">Option 2.5</a></li>
          </ol>
       </li>
       <li><a href="#">Option 3</a></li>
       <li><a href="#">Option 4</a></li>
    </ol>
    and I have a 'click' event listener associated with all links.

    What I'm trying to do is when I click on a link, the script will return back it's location in numbers (e.g.: when you click 'Option 2.4' the script returns '2, 4').

    I'm just having problems with traversing. I don't know how to count how many parent "li" there are to an element. and this doesn't seem to work either:
    Code:
    $(this).parent('li')
    Any ideas (or maybe a better way) to solve this issue?

    Your help is much appreciated.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    you could use something like this which gets the parent elements, reduces them to only the LI ones and returns how many there are.

    Code javascript:
    $(this).parents().filter('li').length;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Taking it further, here's some jquery that returns the values that you're after.

    Code javascript:
    $(targ).parents().filter('li').get().reverse().map(function(el) {
        return $(el).prevAll().andSelf().length};
    ).join(', ');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much pmw57. That nailed it on the head !! I didn't know you could chain all those functions this way. Very helpful.

    The only problem I have now left is this code doesn't work in Internet explorer (6 & 7), and I get an error that says "Object doesn't support this property or method". It appears the problem is the map function.

    I thought jQuery is fully cross-browser compatible. Is there any way around this?

    Thanks again !!

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of parents().filter('li') why don't you do parents('li')??
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works, too.

    Do you have any idea what's wrong with Internet Explorer and this script Jimmy? (or anyone else)


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
  •