Search jQuery

jQuery Forum

Using jQuery

comedydave

Find next instance of class (not as a sibling)

in Using jQuery • 13 years ago

Hi guys, I have the following style markup:

<h2>
<span class="status">
UNDER OFFER
</span>
</h2>
<a class="img" href="#">
<img class="mainImg" src="/graphics/mainImg.jpg"/>
</a>

Basically what I need to do is find the next instace of the class "img" AFTER it finds a class of "status". However i need it to find the next instance in the rest of the html below the "status" class it has found.

I have been trying:

$(".status").next(".img").append('<img src="/graphics/under_offer.gif" class="offer"/>');

As i'm trying to add an overlay image to the hyperlink so it will appear on top of the image that is already there (css absolute and z-index).

Bet grateful for any help!

Dave

Replies(5)

sime.vidas

Re: Find next instance of class (not as a sibling)

13 years ago

The .status SPAN has no siblings - you have to go up one level (to the H2) and then take the next sibling....

$(".status").parent().next(".img")

--
Šime Vidas
http://www.w3viewer.com

comedydave

Re: Find next instance of class (not as a sibling)

13 years ago

Great, thanks for getting back to me. I've tried your solution, but to no avail.

Here's my exact code (sorry, should have posted it earlier):

<div id="p18165137" class="s-rsprop">
          <h2 class="rsaddress">
            <span>Area</span>
            <em>£699,950 <span class="PropStatus">UNDER OFFER</span></em>
          </h2>
          <h3>3 Bedrooms</h3>
          <a title="View further details" class="rsimg" href="/property/18165137">
            <img alt="Property Image" src="http://images.domain.com/images/1.jpg">
          </a>
        </div>

I need it so for every instance of span.PropStatus it finds, '<img src="/graphics/under_offer.gif" class="offer"/>' to be appended to the a tag with the class of 'rsimg'.

I've tried:

$(".PropStatus").parent().parent().next("a.rsimg").append('<img src="/graphics/under_offer.gif" class="offer"/>');
$(".PropStatus").parents(".s-rsprop").next("a.rsimg").append('<img src="/graphics/under_offer.gif" class="offer"/>');
$(".PropStatus").closest(".s-rsprop").next("a.rsimg").append('<img src="/graphics/under_offer.gif" class="offer"/>');

Nothing seems to work.

Thanks again,

Dave

Kevin B

Re: Find next instance of class (not as a sibling)

13 years ago

.next gets the next sibling, not the next one that matches the selector. Including a selector in the .next() function just means that if the element does not match the selector, that element is not included in the resulting array. Therefore, instead of using a selector, you need to use .next() twice.