javascript - Check multiple Classes for style="color: ...." -

as example have class called 'foo' length of 100.

now want find out 1 of 100 have style (color). 1 of them has color, order random can't class foo[100] because random between 1-100

one of them looks like: <span style="color:yellow;">hello</span> how can one? have checked many other questions here, couldn't find part.

it looks like:

<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> 

you can find div.foo elements using queryselectorall. can loop through find first 1 containing span color style using array.prototype.find treat collection array, , within find callback, use queryselectorall find spans style attribute , array.prototype.some find out whether 1 of has color style (as opposed else):

// find `div.foo` elements  var foolist = document.queryselectorall("div.foo");    // find first 1 contains `span` color style  var found = array.prototype.find.call(foolist, function(div) {    // `some` stops first time callback returns truthy value    return array.prototype.some.call(div.queryselectorall("span[style]"), function(span) {      return !!span.style.color;    });  });    // show  console.log(found.outerhtml);

<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>

note in some callback, we're using fact element's style object's color property "" (a falsy value) when there's no inline style color on element.

note can't use attribute substring match, span[style*=color], because match elements didn't want (for instance, <span style="border-color: green">).