Question

好的，这是基本布局。

<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”，其中包含“Unique Title 2”文本。

然后我只需要在“product_item”中添加一个类，并在该项的“item_price_label”中添加一些HTML。

最多列出80个项目，所有项目都有唯一的名称，与此处显示的不同。我无法直接编辑HTML，只能通过JavaScript。

我到目前为止：

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

但不知怎的，它不断添加到所有项目中，当我尝试注入HTML时，它取代了页面中的所有内容。

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

有什么想法吗？谢谢:)）

Answer 1

您可以使用filter方法：

$('.item_title').filter(function() {
     var txt = this.textContent || this.innerText;
     return txt === "Unique Title 2";
}).closest('.product_item').addClass('foo').doOtherStuff();

请注意，您的标记无效，您正在使用</div>关闭span元素。

Answer 2

你可以这样做：

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

Answer 3

除了上述关于.filter的答案之外，您的HTML还需要一些修复..很多元素都缺少结束标记或者有错误的结束标记：

这是fiddle

<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">
                    <div class="item_price_label">Price</div>
                    <div 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">
                    <div class="item_price_label">Price</div>
                    <div 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">
                    <div class="item_price_label">Price</div>
                    <div class="item_price_text">$995</div>
                </p>
          </div>
        </a>
    </div>
</div>

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

3 个答案: