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

Posted 2023-03-06

【中文标题】如何使用 CSS 选择器通过其 innerHTML 值获取 Child？ [复制]

【英文标题】：How to grab a Child by its innerHTML value using CSS Selector? [duplicate]

【发布时间】：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 值来获取一个孩子。

谢谢。

【问题讨论】：

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

【参考方案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 > 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];