文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用CSS选择器通过其innerHTML值捕获子？

问如何使用CSS选择器通过其innerHTML值捕获子？
EN

Stack Overflow用户

提问于 2017-03-03 07:15:30

回答 4查看 3.1K关注 0票数 2

我有这个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-自动完成-列表智能关闭-iztgn224”，它有4个子级。

我能用什么CSS选择器来抓取包含"Mary“的孩子？

我试着用

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

但是我不知道如何用它的innerHTML值来抓取一个孩子。

谢谢。

javascript

css-selectors

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-03-03 08:07:02

如果可以使用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];

票数 1

Stack Overflow用户

发布于 2017-03-03 07:31:03

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>

票数 1

Stack Overflow用户

发布于 2017-03-03 07:36:35

您不能使用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42572856

复制

相似问题

问如何使用CSS选择器通过其innerHTML值捕获子？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS选择器通过其innerHTML值捕获子？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS选择器通过其innerHTML值捕获子？
EN