需要檢查類存在於多個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>