需要检查类存在于多个div使用javascript

Question

有多个div的step_input作为类，并在这些divs可能会或可能不会跨同一类。我需要检查一个特定的跨度是否存在于任何带有class的div中作为step_input。然后改变可选标签class中存在的同一类的跨度颜色。我只能使用javascript。

这里在小提琴span1中存在step_input类。所以它在可选标签中的颜色需要改变。
这里有一个小提琴Link

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检测的跨度。它在.selectable_tags类中的相应颜色发生变化。像这里一样，具有类'ing-tag_1'的Span1在step_input类中。现在，具有class 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

我没有得到你要的东西，但据我所知，选择器.selectable-tags > span应该对直接孩子工作正常。你已经做过了。

编辑： 首先，

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

此行检查名为step_input标签不你的HTML存在的，也有与step_input_0标识的，你需要准备通过运行一个循环来创建一个ID数组。否则，你可以使用document.getElementsByName("step")

再次， 你只需要遍历DOM，名称为name访问跨度内div的IT会看起来像：

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

同样，我认为你应该看看在DOM遍历上，让我知道。

Answer 3

这是你需要的吗？

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>