Question

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

这里的小提琴span1存在于step_input类中。因此需要更改其可选标签的颜色这是一个小提琴Link

＆＃13;

  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";
    }  
   
   }

＆＃13;

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

＆＃13;

编辑：在step_input中检测到跨度时。其中相应的一个.selectable_tags类的颜色会发生变化。就像这里的Span1与class＆＃39; ing-tag_1＆＃39;在step_input类中。现在，需要更改具有类selectable_tags颜色的div中Span1的颜色。如果有的话，请建议更好的方法。

Answer 1

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

＆＃13;

 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";
       }  }
       
    }}

＆＃13;

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

＆＃13;

Answer 2

这是你需要的吗？

＆＃13;

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";
        }  
        
      }
    }
  }

＆＃13;

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

＆＃13;

Answer 3

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

编辑：首先，

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

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

再次您只需遍历DOM，访问名称为div的{{1}}内的范围，它将类似于：

name

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

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

3 个答案: