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

Question

有多个 step_input 的 div 作为 class，并且在这些 div 中可能包含也可能不包含具有相同 class 的跨度。我需要检查 div 和 class 作为 step_input 中是否存在特定跨度。然后使用可选标签 class.I 中存在的相同 class 更改 span 的颜色必须仅使用 javascript

此处在 fiddle span1 存在于 step_input class。所以它在selectable-tags中的颜色需要改变。
这是一个 fiddle 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 class 的颜色变化。就像这里 Span1 with class 'ing-tag_1' 在 step_input class 中。现在 div 中 Span1 的颜色需要更改 class selectable_tags 的颜色。如果有更好的方法，请提出一个更好的方法。

Answer 1

我没有得到您的要求，但据我所知，选择器 .selectable-tags > span 应该适用于直接子代。你已经做过了。

编辑：首先，

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

此行检查名称为 step_input 的标签，它在您的 HTML 中不存在，有 ID 为 step_input_0，您需要准备一个数组ID由运行一个循环。否则你可以使用 document.getElementsByName("step")

再次，您只需遍历 DOM，即可访问名称为 name 的 div 内的跨度，它看起来像：

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

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

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

您需要一个一个地改变每个可选标签的颜色。以下将检查 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>

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

Need to check class exist in multiple div using javascript

javascript

html

css

meteor-blaze