Need to check class exist in multiple div using javascript

Question

There are multiple divs of step_input as class and inside those divs may or may not consists spans with same class. I need to check whether a particular span exist in any of the div with class as step_input. Then change the color of spans with same class which exists in selectable-tags class.I had to use javascript only

Here in the fiddle span1 exists in the step_input class. So its color in selectable-tags needs to be changed.
Here's a 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> 

Edit: When a span with is detected in the step_input. Its corresponding one in .selectable_tags class 's color changes. Like here Span1 with class 'ing-tag_1' is in step_input class. Now the color of Span1 in the div with class selectable_tags 's color needs to be change. Please suggest a better way to do this if there's one.

Answer 1

You need to change color each selectable tag one by by one. The following would check and color the tag which are present in the 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

Is it this what you need?

 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

I did not get what you're asking for, but as far as I can see, the selector .selectable-tags > span should work fine for direct children. Which you did already.

EDIT: First of all,

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

this line checks for tags with the name step_input which does not exist in your HTML, there are IDs with step_input_0 for that you'll need to prepare an array of ID by running a loop. Otherwise you can use document.getElementsByName("step")

Again, You just have to traverse the DOM, to access the span inside div s with name name it would look something like:

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

Again, I think you should look up on DOM traversing, let me know.