使用jQuery選擇子元素，其中div內容匹配並修改附近的其他元素

好的，這是基本佈局。使用jQuery選擇子元素，其中div內容匹配並修改附近的其他元素

<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」包含文字「唯一標題2」中的「product_item」。

然後，我需要只爲該「product_item」添加一個類，並在該項目的「item_price_label」中添加一些HTML。

將有多達80個項目列出所有具有獨特名稱，不像這裏顯示的。我無法直接通過JavaScript編輯HTML。

我至今：

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

任何想法？謝謝:)

來源

2013-01-17 Nicekiwi

在下面添加了一個答案。 – insomiac

你可以只是這樣做：

$('.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-17 00:15:31 insomiac

您可以使用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-17 00:15:01 undefined

除了有關.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>

來源

2013-01-17 00:16:22

使用jQuery選擇子元素，其中div內容匹配並修改附近的其他元素

回答

相關問題