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>
<span style="background-color: red;" data-class="label" class="ing-tag_1"> wqq </span>
</div>
<div class="selectable-tags" >
<span style="background-color: red" data-class="label" class="ing-tag_0"> Span1 </span>
<span style="background-color: red;" data-class="label" class="ing-tag_1"> wqq </span>
</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 </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.
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>
<span style="background-color: red;" data-class="label" class="ing-tag_1"> wqq </span>
</div>
<div class="selectable-tags" >
<span style="background-color: red" data-class="label" class="ing-tag_0"> Span1 </span>
<span style="background-color: red;" data-class="label" class="ing-tag_1"> wqq </span>
</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 </div>