0

好的，这是基本布局。

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

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

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

将列出多达 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>');

有任何想法吗？谢谢 ：）

4

3 回答 3

1

您可以使用filter方法：

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

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

于 2013-01-17T00:15:01.503 回答
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

于 2013-01-17T00:15:31.277 回答
1

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

这是一个小提琴

<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>
于 2013-01-17T00:16:22.773 回答