Question

＆＃13;

function func(x) {
  var y = $("#" + (x.id));
  //nextAll get the number at the end of their id -=1
  //y.nextAll().attr('id', )
  //
  y.remove()
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
  <div id="div1" onclick="func(this)">Lorem</div>
  <div id="div2" onclick="func(this)">Ipsum</div>
  <div id="div3" onclick="func(this)">Dolor</div>
  <div id="div4" onclick="func(this)">Sit</div>
  <div id="div5" onclick="func(this)">Amet</div>
</div>

＆＃13;

如何在所选div之后遍历每个div？例如，如果用户点击div2，div3将有一个函数，以及div4和div5。

Answer 1

您可以使用each来迭代选择中的元素

function func(x) {
  var y = $(x);
  y.nextAll().each(function(index, element){
    // do something 
  })

  y.remove()
}

Answer 2

仅捕获点击元素后的div：

function func(x) {
  $(x).nextAll().remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
  <div id="div1" onclick="func(this)">Lorem</div>
  <div id="div2" onclick="func(this)">Ipsum</div>
  <div id="div3" onclick="func(this)">Dolor</div>
  <div id="div4" onclick="func(this)">Sit</div>
  <div id="div5" onclick="func(this)">Amet</div>
</div>

Answer 3

另一种方法是使用 Next Siblings Selector (“target selector ~ next siblings selector”)

shttp

$('[id^=div]').on('click', function() {
  $(`#${$(this).attr('id')} ~ div`).fadeOut(function() {
    $(this).remove()
  });
});

[id^=div] {
  border: 1px dashed lightgreen;
  padding: 5px;
  margin: 5px;
  cursor: pointer
}

单独更改nextAll（）jQuery

3 个答案: