如何通过jQuery隐藏两个特定id之间的内容

How to hide content between two specific id by jQuery?

本文关键字：id 之间 两个 jQuery 何通过 隐藏      更新时间：2023-09-26

我必须隐藏具有不同id的两个特定div之间的所有内容。

例如：

<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>

就像上面的例子一样，我想隐藏id a1和a2之间的div。

将nextAll与each一起使用。

$('#a1').hide().nextAll().each(function() {
  $(this).hide();
  if ($(this).attr('id') === 'a2') {
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>HELLO</div>
<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>
<div>BYE</div>

您可以使用nextUntil（）来实现这一点。一行：

$("#a1").nextUntil("#a2").hide();

示例：

$(document).ready(function() {
  $("#hide").click(function() {
    var hideElement = $("#a1").nextUntil("#a2");
    hideElement.hide();
  });
});

<div id="a1">Hi</div>
<div>Some Random Text</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>
<button id="hide">hide</button>

jsFiddle

请注意，nextUntil()不包括杂散文本节点，请参阅此问题以获得解决方案。

HI现在您可以将其隐藏在css 中

    #a1, #a1 ~ #a2{display:none;}
<div id="a1">Hi</div>
    <div>Some Random Text</div>
    <div id="a2">Hello</div>

如果cotrol都是同级，则可以使用.nextUntil()或.prevUntil()jQuery选择器。有关详细信息，请参阅此或此
但是，如果控件不共享同一个父控件，则没有简单的选择器。您必须创建一个方法来查找控件的父控件，以及它们的父控件等。

如果只使用css进行隐藏，效果会更好。

#a1,#a2 {
display:none;
}
<div id="a1">Hi</div>
    <div>Some Random Text</div>
    <div id="a2">Hello</div>

使用简单的jquery，

$("#a1+div").hide();

或使用css

#a1+div{
display: none;
}

如果你想删除这两个div之间的所有内容，试试这个，

$("#a1").nextAll().each(function(){
    if($(this).attr("id") != "a2"){
        $(this).hide();
    }
    else{
        //element found with id 'a2' so exit;
        return false;
    }
});

IT只需使用元素id和hide（）函数

$(document).ready(function(){
  
$("#a1,#a2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>

相关文章：