需要使用 javascript 检查 class 存在于多个 div 中
Need to check class exist in multiple div using javascript
有多个 step_input 的 div 作为 class,并且在这些 div 中可能包含也可能不包含具有相同 class 的跨度。我需要检查 div 和 class 作为 step_input 中是否存在特定跨度。然后使用可选标签 class.I 中存在的相同 class 更改 span 的颜色必须仅使用 javascript
此处在 fiddle span1 存在于 step_input class。所以它在selectable-tags中的颜色需要改变。
这是一个 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>
编辑:当在 step_input 中检测到跨度时。它对应的一个在 .selectable_tags class 的颜色变化。就像这里 Span1 with class 'ing-tag_1' 在 step_input class 中。现在 div 中 Span1 的颜色需要更改 class selectable_tags 的颜色。如果有更好的方法,请提出一个更好的方法。
我没有得到您的要求,但据我所知,选择器 .selectable-tags > span
应该适用于直接子代。你已经做过了。
编辑:
首先,
var parentz = document.querySelectorAll('step_input');
此行检查名称为 step_input
的标签,它在您的 HTML 中不存在,有 ID 为 step_input_0
,您需要准备一个数组ID由运行一个循环。否则你可以使用 document.getElementsByName("step")
再次,
您只需遍历 DOM,即可访问名称为 name
的 div
内的跨度,它看起来像:
const divsWithStep = document.getElementsByName("step");
divsWithStep.forEach((div)=>{
div.querySelector('span').style.backgroundColor="#fafafa";
})
同样,我认为您应该查看 DOM 遍历,让我知道。
这是您需要的吗?
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>
<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>
您需要一个一个地改变每个可选标签的颜色。以下将检查 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>
有多个 step_input 的 div 作为 class,并且在这些 div 中可能包含也可能不包含具有相同 class 的跨度。我需要检查 div 和 class 作为 step_input 中是否存在特定跨度。然后使用可选标签 class.I 中存在的相同 class 更改 span 的颜色必须仅使用 javascript
此处在 fiddle span1 存在于 step_input class。所以它在selectable-tags中的颜色需要改变。
这是一个 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>
编辑:当在 step_input 中检测到跨度时。它对应的一个在 .selectable_tags class 的颜色变化。就像这里 Span1 with class 'ing-tag_1' 在 step_input class 中。现在 div 中 Span1 的颜色需要更改 class selectable_tags 的颜色。如果有更好的方法,请提出一个更好的方法。
我没有得到您的要求,但据我所知,选择器 .selectable-tags > span
应该适用于直接子代。你已经做过了。
编辑: 首先,
var parentz = document.querySelectorAll('step_input');
此行检查名称为 step_input
的标签,它在您的 HTML 中不存在,有 ID 为 step_input_0
,您需要准备一个数组ID由运行一个循环。否则你可以使用 document.getElementsByName("step")
再次,
您只需遍历 DOM,即可访问名称为 name
的 div
内的跨度,它看起来像:
const divsWithStep = document.getElementsByName("step");
divsWithStep.forEach((div)=>{
div.querySelector('span').style.backgroundColor="#fafafa";
})
同样,我认为您应该查看 DOM 遍历,让我知道。
这是您需要的吗?
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>
<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>
您需要一个一个地改变每个可选标签的颜色。以下将检查 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>