javascript - 如何根据文本选择列表的li然后编辑子跨度？

Question

假设我有这个 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>

我正在寻找一个 jQuery 选择器，它会选择像 Banana 这样的列表项，然后能够将其子徽章编辑为任何值。

我环顾四周，看到一些非常复杂的选择器，涉及 contains(这对我来说已经不够精确)和跨越多行的 lambda 函数/循环，我想知道是否有更好的方法.

Answer 1

Fiddle Example .

您可以使用 .data() 就像评论中提到的@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>

JS :

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

希望这对您有所帮助。