需要使用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遍歷，讓我知道。