Question

例如，我有一个名为'foo'的类，长度为100。

现在我想知道这100个中哪一个有风格（颜色）。其中只有一个有颜色，但顺序是随机的，所以我无法通过foo[100]获得该类，因为它在1-100之间随机

其中一个看起来像：<span style="color:yellow;">hello</span> 那我怎么能得到这个呢？我在这里已经检查了很多其他问题，但我找不到任何关于这部分的内容。

看起来像：

<div class="foo"> <div><span style="color:yellow;">2</span></div></div>
<div class="foo"> <div><span>1</span></div></div>
<div class="foo"> <div><span>2</span></div></div>
<div class="foo"> <div><span>1</span></div></div>

Answer 1

您可以使用div.foo找到所有querySelectorAll元素。然后，您可以通过使用span来查找包含带有颜色样式的Array.prototype.find的第一个，并将该集合视为数组，并在find回调中使用{{ 1}}使用querySelectorAll属性查找span，然后style查找其中一个是否具有Array.prototype.some样式（与其他内容相对）：< / p>

＆＃13;

color

＆＃13;

// Find all `div.foo` elements
var fooList = document.querySelectorAll("div.foo");

// Find the first one that contains a `span` with a color style
var found = Array.prototype.find.call(fooList, function(div) {
  // `some` stops the first time its callback returns a truthy value
  return Array.prototype.some.call(div.querySelectorAll("span[style]"), function(span) {
    return !!span.style.color;
  });
});

// Show it
console.log(found.outerHTML);

＆＃13;

请注意，在<div class="foo"><div><span style="color:yellow;">this one</span></div></div> <div class="foo"><div><span>1</span></div></div> <div class="foo"><div><span>2</span></div></div> <div class="foo"> <div><span>1</span></div></div>回调中，我们使用了元素的some对象style属性为{{1}的事实} {（虚假值），当该元素上没有color的内联样式时。

请注意，我们无法使用属性子字符串匹配""，因为这会匹配我们不想要的元素（例如color }）。

检查多个类的style =“color：....”

1 个答案: