如何使用 CSS 选择器通过其 innerHTML 值获取 Child？ [复制]答案

【问题标题】：How to grab a Child by its innerHTML value using CSS Selector? [duplicate]如何使用 CSS 选择器通过其 innerHTML 值获取 Child？ [复制]
【发布时间】：2017-07-23 04:59:33
【问题描述】：

我有这个 HTML

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute; top: 141px; left: 309px;">
        <li data-value="1" class="visible">All</li>
        <li data-value="1" class="visible">John (123)</li>
        <li data-value="1" class="visible">Mary (456)</li>
        <li data-value="1" class="visible">Kelly (987)</li>

父类有“ui-autocomplete-list smart-close-iztgn224”类，它有 4 个子类。

我可以使用什么 CSS 选择器来抓取包含“玛丽”的孩子？

我尝试过使用

document.querySelector("ul.ui-autocomplete-list > li.visible");

但是我不知道如何通过它的 innerHTML 值来获取一个孩子。

谢谢。

【问题讨论】：

看看这里：stackoverflow.com/questions/1520429/…

标签： javascript css-selectors

【解决方案1】：

css 选择器不提供通过.textContent 或.innerHTML 选择元素的方法。您可以包含一个额外的data-* 属性，或者在data-* 属性中使用JSON 并使用属性选择器

document.querySelector("li[data-name='Mary']").style.color = "sienna";

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute;">
  <li data-value="1" data-name="All" class="visible">All</li>
  <li data-value="1" data-name="John" class="visible">John (123)</li>
  <li data-value="1" data-name="Mary" class="visible">Mary (456)</li>
  <li data-value="1" data-name="Kelly" class="visible">Kelly (987)</li>
</ul>

document.querySelector("li[data-props*='Mary']").style.color = "sienna";

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute;">
  <li data-props='{"value":"1", "name":"All"}' class="visible">All</li>
  <li data-props='{"value":"1", "name":"John"}' class="visible">John (123)</li>
  <li data-props='{"value":"1", "name":"Mary"}' class="visible">Mary (456)</li>
  <li data-props='{"value":"1", "name":"Kelly"}' class="visible">Kelly (987)</li>
</ul>

【讨论】：

【解决方案2】：

您无法使用 CSS 选择器获取 innerHTML 值，但是如果您明智的话，您可以获取所有 li 元素并使用 forEach() 来定位所需的元素。

var elements = document.querySelectorAll("ul.ui-autocomplete-list > li.visible");
elements.forEach(function(elem) {
  if (elem.textContent.includes('Mary'))
    elem.classList.add('red')
});

.red {
  color: red
}

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute; top: 141px; left: 309px;">
  <li data-value="1" class="visible">All</li>
  <li data-value="1" class="visible">John (123)</li>
  <li data-value="1" class="visible">Mary (456)</li>
  <li data-value="1" class="visible">Kelly (987)</li>
</ul>

【讨论】：

【解决方案3】：

您无法使用 css 选择器获取 innerHTML 值，而 querySelector 使用 CSS 选择器。如果你可以使用Jquery，那么使用contains Selector就可以轻松完成。

$("ul.ui-autocomplete-list &gt; li:contains('John')").css( "color", "red" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="ui-autocomplete-list smart-close-iztgn224" style="opacity: 1; visibility: visible;  position: absolute; top: 141px; left: 309px;">
        <li data-value="1" class="visible">All</li>
        <li data-value="1" class="visible">John (123)</li>
        <li data-value="1" class="visible">Mary (456)</li>
        <li data-value="1" class="visible">Kelly (987)</li>
</ul>

如果您仅限于使用 JS，您可以做的另一件事是您可以将 data-attribute 添加到每个 li 元素并根据它们的 data-attribute 值选择元素

【讨论】：

【解决方案4】：

如果你可以使用 jQuery，你可以使用包含选择器：

$(("ul.ui-autocomplete-list > li:contains('mary')"))

对于原生 javascript，这是可行的：

var mary = [].slice.call(document.querySelectorAll("ul.ui-autocomplete-list > li.visible")).filter(function (item){
    return item.innerText.includes("mary");
})[0];

【讨论】：