针对元素组的if.length函数后的目标特定元素

问题描述：

我想我非常接近，只需要最后一点关于如何将$（this）集成到我的函数中。针对元素组的if.length函数后的目标特定元素

我想看看parentDiv是否包含childDiv，然后删除上述parentDiv（全部由类定义）的边框。

到目前为止，我有：

$(function() { 
 
    var parentDiv = document.getElementsByClassName("class1"); 
 
    var childDiv = document.getElementsByClassName("class2"); 
 

 
    if ($(childDiv, parentDiv).length) { 
 
    $(parentDiv).addClass("noborder"); 
 
    } 
 

 
});

想象HTML如下，我们的目标是，在第二class1的记载：类= “class1的noborder”，因为班级1包含班级2

<div class="class1"> 
 
    <div class="bla"></div> 
 
    <div class="bla"></div> 
 
    <div class="bla"></div> 
 
    <div class="bla"></div> 
 
</div> 
 
<div class="class1"> 
 
    <div class="bla"></div> 
 
    <div class="class2"></div> 
 
    <div class="bla"></div> 
 
</div>

目前我明明更换所有parentDiv的，但我想指定的特定一个的如果测试正在上完成，任何帮助赞赏

请问您是否需要包含您的html代码？ –

我试图在if测试中添加$（this），但是我觉得我需要将if测试包装到另一个函数中，在其中建立$（this）off parentDiv并使用它，但我不确定如何去追踪它。 – Counterfire

添加到主帖子，我在不同的机器上发布这个，但想象如上面写的HTML - 简化 – Counterfire

答

如你不介意使用jQuery，您可以使用.has()函数来实现这一

$(function(){ 
 
    $(".class1").has(".class2").addClass('noborder'); 
 
});

.class1 { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: yellow; 
 
    margin: 10px; 
 
    border: 1px solid red; 
 
} 
 

 
.noborder { 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="class1"> 
 
    <div class="bla"></div> 
 
    <div class="bla"></div> 
 
    <div class="bla"></div> 
 
    <div class="bla"></div> 
 
</div> 
 
<div class="class1"> 
 
    <div class="bla"></div> 
 
    <div class="class2"></div> 
 
    <div class="bla"></div> 
 
</div>

完美，可行！ – Counterfire

答

使用jQuery :has selector或has() method

$('.class1:has(.class2)').addClass('border'); 
 

 

 
// add content for demo 
 
$('.class1').children().text(function(){ 
 
    return $(this).attr('class') 
 
})

.border{border: 1px solid green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="class1"> 
 
    <div class="bla"></div> 
 
    <div class="bla"></div> 
 
    <div class="bla"></div> 
 
    <div class="bla"></div> 
 
</div> 
 
<div class="class1"> 
 
    <div class="bla"></div> 
 
    <div class="class2"></div> 
 
    <div class="bla"></div> 
 
</div>

答

if(jQuery('#class1').find('.class2').length !== 0){ 
    jQuery('#class1').addClass("noborder"); 
}

这应该工作。

针对元素组的if.length函数后的目标特定元素

相关推荐