jquery - 使用 jQuery 选择 div 内容匹配的子元素并修改附近的其他元素

Question

OK，这是基本的布局。

<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>

我只需要选择包含“item_title”的“product_item”，其中“item_title”包含文本“Unique Title 2”。

然后我只需要向该“product_item”添加一个类，并将一些 HTML 添加到该元素的“item_price_label”中。

将列出多达 80 个元素，所有元素都具有唯一名称，与此处显示的不同。我不能直接编辑 HTML，只能通过 JavaScript。

我到目前为止:

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

但不知何故，它一直将它添加到所有元素中，当我尝试注入(inject) HTML 时，它替换了页面中的所有内容。

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

有什么想法吗？谢谢:)

Answer 1

你可以这样做:

   $('.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>');

演示:Jsfiddle