Question

OK, this is the basic layout.

<div class="products">
    <div class="product_item">
        <a href="#">
            <div class="item_title">Unique Title 1</div>
            <div class="item_price_box">
                <p class="item_price">
                    <span class="item_price_label">Price</div>
                    <span class="item_price_text">$265</div>
                </p>
            <div>
        </a>
    </div>
    <div class="product_item">
        <a href="#">
            <div class="item_title">Unique Title 2</div>
            <div class="item_price_box">
                <p class="item_price">
                    <span class="item_price_label">Price</div>
                    <span class="item_price_text">$550</div>
                </p>
            <div>
        </a>
    </div>
    <div class="product_item">
        <a href="#">
            <div class="item_title">Unique Title 3</div>
            <div class="item_price_box">
                <p class="item_price">
                    <span class="item_price_label">Price</div>
                    <span class="item_price_text">$995</div>
                </p>
            <div>
        </a>
    </div>
    ...
</div>

I need to select only the “product_item” that contains “item_title” that contains the text “Unique Title 2”.

Then I need to add a class to that “product_item” only, and add some HTML into the “item_price_label” of that item.

There will be upto 80 items listed all with unique names, not like the ones shown here. I can not edit the HTML directly, only via JavaScript.

I had so far:

 $('div:contains("Unique Title 2")').parent().parent().addClass('foo');

But somehow it kept adding it to all the items, and when I tried to inject the HTML It replaced all content in the page.

$('.foo').find('.item_price_label').html('<div class="new_stuff_here">Yay content here</div>');

Any ideas? Thanks 🙂

Answer 1

You can just do this :

   $('.item_title:contains("Unique Title 2")').closest('.product_item').addClass('textFound').find('.item_price_label').html('<div class="new_stuff_here">Yay content here</div>');

Demo : Jsfiddle