Javascript 如何选择列表'；s li基于文本，然后编辑子范围？

假设我有这个HTML：

<ul class="list-group" id="words">
    <li class="list-group-item"><span class="badge">10</span>Apple</li>
    <li class="list-group-item"><span class="badge">50</span>Banana</li>
    <li class="list-group-item"><span class="badge">30</span>Carrot</li>
</ul>

10苹果
50
30Carrot

我正在寻找一个jQuery选择器，它将选择一个列表项，如

Banana

，然后能够将其子标记编辑为任何值

我环顾四周，看到一些非常复杂的选择器，包括

contains

（对我来说还不够精确）和lambda函数/跨越多行的循环，我想知道是否有更好的方法。

您可以像注释中提到的@dsh一样使用，请参见下面的示例：

HTML:

<ul class="list-group" id="words">
    <li class="list-group-item" data-text="Apple"><span class="badge">10</span>Apple</li>
    <li class="list-group-item" data-text="Banana"><span class="badge">50</span>Banana</li>
    <li class="list-group-item" data-text="Carrot"><span class="badge">30</span>Carrot</li>
</ul>

$( ".list-group-item[data-text='Banana'] .badge" ).text(); //50

希望这有帮助。

$（“li:contains（Banana）>.badge”）。文本（“任意”）

应该是jQuery的正确选择器。但是，如果不具体，则应尽量避免：contains（）。上面的选择器必须搜索每个列表元素。如果只在给定列表中搜索，请使用

$（“#words>li:包含（香蕉）>.badge”）.text（“任意”）

---

或者使用

数据

属性，正如dsh所评论的那样，

如果您想要更好的方法，请将属性添加到元素中，以便可以在选择器中使用数据。啊，好吧，那么

数据

要快得多？它使用了什么，散列还是什么？我不确定

数据
是如何实现的contains（）对列表元素和每个子元素中的给定字符串执行深度搜索。根据您的HTML，此搜索比仅在几个元素属性中查找字符串要慢得多。