jquery: next() and nested elements

lauthiamkok · 02-08-2010, 05:20 PM

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

rnd me · 02-08-2010, 08:22 PM

Code:

<script>$("div:first p.selected").html("selected");</script>

Fumigator · 02-08-2010, 08:55 PM

Quote:

Originally Posted by rnd me

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.

lauthiamkok · 02-08-2010, 09:30 PM

Quote:

Originally Posted by Fumigator

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