[英]Hide an element in DOM when specific class included
当html代码中间包含特定类时,我需要从DOM中隐藏div。 请看这个例子。
<body>
<div class="first-group">
<h1>Hello world</h1>
</div>
<div class="wrapper">
<div class="second-group">
<div class="main">
<div class="small">
<span class="text-block">Hello mars</span>
</div>
</div>
</div>
</div>
</body>
我试图用jQuery .closest()
实现这一点,但是没有运气。
$( ".text-block" ).closest( ".first-group" ).css( "color", "red" );
有什么办法吗?
if($(".second-group span").hasClass("text-block")) { $('.first-group').css('display', "none"); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> </body>
如果包装器内.text-block
的长度大于0,则只需简单地使.first-group
display: none
。
if($( ".wrapper" ).find( ".text-block" ).length > 0){ $('.first-group').css( "display", "none" ) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div>
如果您有多个.wrapper
.first-group
和.wrapper
则只需循环包装器并找到其父级和该父级的上一个元素。
$( ".wrapper" ).find( ".text-block" ).each(function() { $(this).parents('.wrapper').prev('.first-group').css( "display", "none" ); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div>
您的基本问题是, closest()寻找祖先。 .text-block
不是.first-group
的后代。 使用prev()查找包含块的上一个同级。
根据您的意见, 如果有中间兄弟姐妹,则 prevAll
可以使用。我在示例中添加了一些空的 divs
进行演示。我需要检查一些附带情况。
为了使此功能更强大,我使用了prevUntil来限制同级选择,并结合prev
来查找实际感兴趣的元素。
$( ".text-block" ).closest( ".wrapper" ).prevUntil(".first-group").prev().hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <!-- This Won't Show --> <div class="first-group"> <h1>Hello world</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> <!--This Will Show--> <div class="first-group"> <h1>Hello world, Again</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="not-text-block">Hello jupiter</span> </div> </div> </div> </div> <!-- This Won't Show --> <div class="first-group"> <h1>Hello world</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> <!--This Will Show--> <div class="first-group"> <h1>Hello world, Again</h1> </div> <div></div><div></div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="not-text-block">Hello jupiter</span> </div> </div> </div> </div> </body>
注意如果您更改HTML结构,这将中断。
当.first-group在.wrapper div之外时,最接近的使用只会寻找其祖先。
在下面的代码中,我们找到元素的祖先,然后使用prev()获取类为.first-group的前一个元素
$(this).closest("div.wrapper").prev(".first-group").css('display', 'none');
看看是否可行。
您可以尝试使用parents()
和siblings()
,如下所示:
$(".text-block").parents('.wrapper').siblings('.first-group').css( "color", "red" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="first-group"> <h1>Hello world</h1> </div> <div class="wrapper"> <div class="second-group"> <div class="main"> <div class="small"> <span class="text-block">Hello mars</span> </div> </div> </div> </div> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.