需要使用JavaScript检查多个div中是否存在类

Question

step_input有多个div作为类，并且在这些div中可能包含也可能不包含具有相同类的span。 我需要检查类是否为step_input的任何div中是否存在特定范围。 然后更改与selectable-tags类中存在的同一类的span的颜色。我只需要使用javascript

在小提琴中，step1输入类中存在span1。 因此，需要更改可选标签中的颜色。
这是一个小提琴链接

  var parentz = document.querySelectorAll('step_input'); for(i=0;i<document.querySelectorAll('.selectable-tags > span').length;i++) { tagclassName='ing-tag_'+i; for(k=0;k<parentz.length;k++) if ( parentz[k].querySelector("."+tagclassName) !== null) { document.querySelector('.selectable-tags > tagclassName').style.backgroundColor="#fafafa"; } } 

 <div class="selectable-tags" > <span data-class="label" style="background-color: red;" class="ing-tag_0"> Span1 </span> &nbsp; <span style="background-color: red;" data-class="label" class="ing-tag_1"> wqq </span> &nbsp; </div> <div class="selectable-tags" > <span style="background-color: red" data-class="label" class="ing-tag_0"> Span1 </span> &nbsp; <span style="background-color: red;" data-class="label" class="ing-tag_1"> wqq </span> &nbsp; </div> <div id="step_input_0" name="step" class="recipe-create-text_box_rectangle stepbox step_input" contenteditable="true"> This does not contains anything </div> <div value="" id="step_input_1" name="step" placeholder="Tell us about step 2" class="recipe-create-text_box_rectangle stepbox step_input" contenteditable="true"> <span style="background-color: red;" data-class="label" class="ing-tag_0" contenteditable="false"> Span1 </span>Thw color of span 1 in selectable tags needs to change&nbsp;</div> 

编辑：在step_input中检测到span时。 它在.selectable_tags类的颜色中对应的颜色更改。 就像这里，类“ ing-tag_1”的Span1在step_input类中。 现在，需要更改类selectable_tags的div中的Span1的颜色。 如果有的话，请提出一种更好的方法。

Answer 1

您需要逐个更改每个可选标签的颜色。 以下内容将检查step_input中存在的标签并为其着色

  var parentz = document.querySelectorAll('.step_input'); console.log(parentz); for(i=0;i<document.querySelectorAll('.selectable-tags > span').length;i++){console.log(document.querySelectorAll('.selectable-tags > span')); tagclassName='ing-tag_'+i; for(k=0;k<parentz.length;k++){ if ( parentz[k].querySelector("."+tagclassName) !== null) { colorthem= document.querySelectorAll('.selectable-tags > .'+tagclassName) ;console.log(colorthem); for(l=0;l<colorthem.length;l++) {console.log(colorthem[l]); colorthem[l].style.backgroundColor="red"; } } }} 

 <div class="selectable-tags" > <span data-class="label" style="background-color: red;" class="ing-tag_0"> Span1 </span> &nbsp; <span style="background-color: red;" data-class="label" class="ing-tag_1"> wqq </span> &nbsp; </div> <div class="selectable-tags" > <span style="background-color: red" data-class="label" class="ing-tag_0"> Span1 </span> &nbsp; <span style="background-color: red;" data-class="label" class="ing-tag_1"> wqq </span> &nbsp; </div> <div id="step_input_0" name="step" class="recipe-create-text_box_rectangle stepbox step_input" contenteditable="true"> This does not contains anything </div> <div value="" id="step_input_1" name="step" placeholder="Tell us about step 2" class="recipe-create-text_box_rectangle stepbox step_input" contenteditable="true"> <span style="background-color: red;" data-class="label" class="ing-tag_0" contenteditable="false"> Span1 </span>Thw color of span 1 in selectable tags needs to change&nbsp;</div> 

Answer 2

这就是您所需要的吗？

 var parentz = document.querySelectorAll('.step_input'); var selectable = document.querySelectorAll('.selectable-tags'); for(j=0; j < selectable.length; j++){ var current = selectable[j]; var spans = current.querySelectorAll('.selectable-tags > span'); for(i=0; i < spans.length; i++){ tagclassName='ing-tag_'+i; for(k=0; k < parentz.length; k++){ if (parentz[k].querySelector("."+tagclassName)) { selectable[j].querySelector('.' +tagclassName).style.backgroundColor="#fafafa"; } } } } 

 <div class="selectable-tags" > <span data-class="label 11" style="background-color: red;" class="ing-tag_0"> Span1 </span> &nbsp; <span style="background-color: red;" data-class="label" class="ing-tag_1"> wqq </span> &nbsp; </div> <div class="selectable-tags" > <span style="background-color: red" data-class="label" class="ing-tag_0"> Span1 </span> &nbsp; <span style="background-color: red;" data-class="label" class="ing-tag_1"> wqq </span> &nbsp; </div> <div id="step_input_0" name="step" class="recipe-create-text_box_rectangle stepbox step_input" contenteditable="true"> This does not contains anything </div> <div value="" id="step_input_1" name="step" placeholder="Tell us about step 2" class="recipe-create-text_box_rectangle stepbox step_input" contenteditable="true"> <span style="background-color: red;" data-class="label" class="ing-tag_0" contenteditable="false"> Span1 </span> Thw color of span 1 in selectable tags needs to change&nbsp; </div> 

Answer 3

我没有得到您的要求，但是据我.selectable-tags > span ，选择器.selectable-tags > span应该对直接子代来说很好用。 你已经做了。

编辑：首先，

var parentz = document.querySelectorAll('step_input');

此行检查HTML中不存在的名称为step_input标记，其中存在具有step_input_0 ID，您需要通过运行循环来准备ID数组。 否则，您可以使用document.getElementsByName("step")

同样，您只需要遍历DOM，即可使用名称name访问div内的div ，它看起来像：

const divsWithStep = document.getElementsByName("step");
divsWithStep.forEach((div)=>{
  div.querySelector('span').style.backgroundColor="#fafafa";
})

同样，我认为您应该检查DOM遍历，让我知道。