javascript - 根据类获取<li>值

Question

我有以下示例代码:

<ul class="name_of_class" id="TEST">
    <li class="foo">1</li>
    <li class="boo">2</li>
    <li class="goo">3</li>
<ul>

当特定 <li>选择后，类将更改为任何名称，加上 sortUp或sortDown .

示例:

<ul class="name_of_class" id="TEST">
    <li class="foo">111</li>
    <li class="boo sortDown">222</li>
    <li class="goo">333</li>
<ul>

我正在尝试获取 <li> 中实际文本的值，但我总是变得不确定。

var li = document.getElementById('TEST');
alert($('#TEST').filter('.sort').html());

我尝试使用不同的方法，但无论我做什么，我都无法获得实际值，在本例中应该是 222 .

知道我做错了什么吗？

Answer 1

您可以选择li与 sortUp或sortDown通过使用[attribute*="value"]选择器，

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.

const li = document.querySelector('[class*="sort"]');
console.log(li.textContent);

li.style.background = "red";

<ul class="name_of_class" id="TEST">
    <li class="foo">111</li>
    <li class="boo sortDown">222</li>
    <li class="goo">333</li>
<ul>

参见css attribute selectors