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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    jquery: next() and nested elements

    Hi,
    I have nested elements like below,

    Code:
    <div>
    		<p>Hello Again</p>
    		<p class="selected"></p>
    	</div>
    	
    	<div>
    		<p>Hello Again</p>
    		<p class="selected"></p>
    	</div>
    	
    	<div>
    		<p>Hello Again</p>
    		<p class="selected"></p>
    	</div>
    I want to add text in the 'selected' paragraph in the second div,

    Code:
    <script>$("div:first").next('.selected').text("selected");</script>
    it won't work at all. please let me know if you have any ideas.

    Many thanks,
    Lau

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,371
    Thanks
    11
    Thanked 591 Times in 572 Posts
    Code:
    <script>$("div:first p.selected").html("selected");</script>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Quote Originally Posted by rnd me View Post
    Code:
    <script>$("div:first p.selected").html("selected");</script>
    That doesn't select the second div, it selects the first.

    If you want the second div, you can use $("div:eq(1)"), and to change the text of the paragraph where class="selected" use $("div:eq(1) p.selected").text("new text here").

    The reason why your code wasn't working is because .next() is like a for loop on a group of selected elements, but your group of selected elements had only one element in it-- the first div.

    (EDIT) No, I was mistaken, that's not why. I was misreading the manual. The reason why is because you giving the .next() function a selector of ".selected", which is an additional filter applied to the next element. So in your case, the second div would only be selected if it has a class="selected". It doesn't check the div's children for this selector.
    Last edited by Fumigator; 02-08-2010 at 09:04 PM.

  • #4
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fumigator View Post
    That doesn't select the second div, it selects the first.

    If you want the second div, you can use $("div:eq(1)"), and to change the text of the paragraph where class="selected" use $("div:eq(1) p.selected").text("new text here").

    The reason why your code wasn't working is because .next() is like a for loop on a group of selected elements, but your group of selected elements had only one element in it-- the first div.

    (EDIT) No, I was mistaken, that's not why. I was misreading the manual. The reason why is because you giving the .next() function a selector of ".selected", which is an additional filter applied to the next element. So in your case, the second div would only be selected if it has a class="selected". It doesn't check the div's children for this selector.
    ello! thanks for guide!

    eq() - now I know that this is what I should have looked into!

    thanks


  •  

    Posting Permissions

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