SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Check content of father's previous sibling [jQuery]

    This is the table's HTML code:

    Code:
    <table>
        <thead>
            <tr>
                <th><a href="">Column 1</a></th>
                <th><a href="">Column 2</a></th>
                .
                .
                .
            </tr>
        </thead>
    </table>
    Let's say that, when I click on the link "Column 2", I want to check if the previous column head contains the text "Column 1". Why is this selector not working?

    Code:
    $(function() {
    	$('th a').click(function() {
    		 if ($(this).html() === 'Column 2' && $(this).parent().prev().children().html() === 'Column 1') {
    			do something
    		}
            })
    })
    If I understood it correctly, I have to find the link's father element (parent()), then find the previous sibling (prev()), find its child (the other link) and finally check its text. However, this is not working...

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    It works for me, but if it doesn't work for you it's probably because of the .children(). That returns a collection of nodes, and not just one node. So you might want to add .eq(0) after .children() to just get the first one

    Code JavaScript:
    $(function() {
    	$('th a').click(function() {
    		 if ($(this).html() === 'Column 2' && $(this).parent().prev().children().eq(0).html() === 'Column 1') {
    			console.log('Ya!');
    		}
    	})
    });

    Even better would be to delegate it from the table (provided you're on jQuery 1.4.2 +)

    Code JavaScript:
    $(function() {
     
    	$('table').delegate('th a', 'click', function() {
    		 if ($(this).html() === 'Column 2' && $(this).parent().prev().children().eq(0).html() === 'Column 1') {
    			console.log('Ya!');
    		}
    	});
     
    });

    Here's a nice video on .delegate() (and the differences between .live() and .delegate(), might you be interested: YouTube - The Difference Between jQuery&#39;s Live() and Delegate() Methods
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  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)
    According to $(this).parent().prev().children().html()
    you're getting the html of all of the children, which is: "<a href="">Column 1</a>"

    What about if you select the anchor from the context of that previous element, using:
    $('a', $(this).parent().prev()).html()
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    It works for me, but if it doesn't work for you it's probably because of the .children(). That returns a collection of nodes, and not just one node. So you might want to add .eq(0) after .children() to just get the first one

    Code JavaScript:
    $(function() {
    	$('th a').click(function() {
    		 if ($(this).html() === 'Column 2' && $(this).parent().prev().children().eq(0).html() === 'Column 1') {
    			console.log('Ya!');
    		}
    	})
    });

    Even better would be to delegate it from the table (provided you're on jQuery 1.4.2 +)

    Code JavaScript:
    $(function() {
     
    	$('table').delegate('th a', 'click', function() {
    		 if ($(this).html() === 'Column 2' && $(this).parent().prev().children().eq(0).html() === 'Column 1') {
    			console.log('Ya!');
    		}
    	});
     
    });

    Here's a nice video on .delegate() (and the differences between .live() and .delegate(), might you be interested: YouTube - The Difference Between jQuery's Live() and Delegate() Methods
    I've just realized that the code that I posted works for me too. The problem is that I had a conflicting statement in an else if branch

  5. #5
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    According to $(this).parent().prev().children().html()
    you're getting the html of all of the children, which is: "<a href="">Column 1</a>"

    What about if you select the anchor from the context of that previous element, using:
    $('a', $(this).parent().prev()).html()
    I didn't know that you could do such thing :O


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
  •