遍历 <li> 并用 jquery 替换文本答案

【问题标题】：Iterate over <li> and replace text with jquery遍历 <li> 并用 jquery 替换文本
【发布时间】：2016-12-26 13:29:53
【问题描述】：

我有以下 HTML 结构：

<div class="mydiv">
  <ul>
    <li>Text 1</li>
    <li>Text 2</li>
  </ul>
  <ul>
    <li>Text 3</li>
    <li>Text 4</li>
  </ul>
  <ul>
    <li>Text 5</li>
  </ul>
</div>

我想找到一个包含“4”的字符串并将其替换为“4”。然后，来自此 div 的其他 li 元素的其他字符串对我来说不再感兴趣。如果我只知道应该在哪个div 中搜索而不知道应该在哪个li 元素中搜索，我该怎么做？

【问题讨论】：

请向我们展示您的工作（您的代码），以及您在什么时候卡住了。我们不是免费的编码工具... ;-)
当我想调整我的 jquery 代码时，答案已经有了，它们对我的问题非常有效。替我替换我的工作或代码并不是一件好事，但有时人们对某些编程语言很陌生，甚至可能不知道用什么来解决特定问题；）

标签： jquery html replace iterated-function

【解决方案1】：

只需在父 div 的 HTML 上使用替换，然后使用替换的内容重置 HTML：

$(".mydiv" ).html($(".mydiv" ).html().replace(/4/, "four"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">
  <ul>
    <li>Text 1</li>
    <li>Text 2</li>
  </ul>
  <ul>
    <li>Text 3</li>
    <li>Text 4</li>
  </ul>
  <ul>
    <li>Text 5</li>
  </ul>
</div>

【讨论】：

也感谢您提供此解决方案。尽管我的真实代码有点复杂，但所有答案对我来说都很好，我不得不调整每个解决方案以尝试它如何以及是否有效:) 谢谢你的努力。它只是为我节省了几个小时！

【解决方案2】：

您可以使用:contains selector

$( "div li:contains('4')" ).text(function(_, val) { 
    return val.replace(/4/, "four")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">
  <ul>
    <li>Text 1</li>
    <li>Text 2</li>
  </ul>
  <ul>
    <li>Text 3</li>
    <li>Text 4</li>
  </ul>
  <ul>
    <li>Text 5</li>
  </ul>
</div>

【讨论】：

你可以使用.text(function)，这里是示例代码$('.mydiv > ul > li:contains("4")').text(function(_, val) { return val.replace(/4/, "four") });