如果 li 包含文本，则将更改应用于同一 li 中的特定 div，而不是全部

Posted 2023-02-23

【中文标题】如果 li 包含文本，则将更改应用于同一 li 中的特定 div，而不是全部

【英文标题】：If li contains text, apply change to specific div in the same li, not all

【发布时间】：2015-06-03 15:14:51

【问题描述】：

我有一个项目列表，每个项目都有一个按钮和一个价格。我能够找到显示“选择选项”的按钮，然后将更改应用到另一个 div，但是，它会更改所有<li>s 的 div，而不仅仅是按钮文本出现的那个。如何仅包含对相关 <li> 的更改？

if ($('ul li:contains("Choose Options")')) 
  $(".p-price").prepend("STARTING AT: ");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <em class="p-price">$1.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
  <li>
    <em class="p-price">$4.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Choose Options</a>
    </div>
  </li>
  <li>
    <em class="p-price">$5.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
</ul>

<script>
</script>

上面的脚本确实找到了“选择选项”文本。但随后它将“开始于：”添加到所有.p-price 实例。我如何让它只更改同一<li> 中的.p-price？这样<li>s 有“添加到购物车”按钮，不要在价格前插入文字？

我已经阅读了有关 .each()、return false 和循环的信息，但不确定我是否在寻找正确的树，因为我尝试了各种失败的代码迭代，但说到这个具体如果包含，更改另一个 div，我找不到任何接近的东西。

【参考方案1】：

不需要if：只需将文本添加到可能存在的任何匹配元素：

$('li:contains("Choose Options") .p-price').
  prepend("STARTING AT: ");

  $('li:contains("Choose Options") .p-price').
    prepend("STARTING AT: ");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li>
    <em class="p-price">$1.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
  <li>
    <em class="p-price">$4.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Choose Options</a>
    </div>
  </li>
  <li>
    <em class="p-price">$5.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
</ul>