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

Question

我有一个项目列表，每个项目都有一个按钮和一个价格。我能够找到显示 "choose options" 的按钮，然后将更改应用到另一个 div，但是，它会更改所有 <li> 的 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">.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
  <li>
    <em class="p-price">.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Choose Options</a>
    </div>
  </li>
  <li>
    <em class="p-price">.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
</ul>

<script>
</script>

上面的脚本确实找到了 "choose options" 文本。但随后它将 "Starting At: " 添加到所有 .p-price 个实例。我如何让它只更改同一个 <li> 中的 .p-price？所以有 "add to cart" 按钮的 <li>s，不要在价格之前插入文本？

我已经阅读了有关 .each()、return false 和循环的内容，但不确定我是否找到了正确的树，因为我尝试了各种代码迭代，但都失败得很厉害，但是当涉及到这个特定的 if contains 时，换一个 div，我找不到任何接近的东西。

Answer 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">.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
  <li>
    <em class="p-price">.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Choose Options</a>
    </div>
  </li>
  <li>
    <em class="p-price">.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
</ul>

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

If li contains text, apply change to specific div in the same li, not all

jquery

if-statement

contains

prepend