jQuery按钮转到dom中的下一个元素，包括所有子元素

w46czmvw 于 2023-11-17 发布在 jQuery

关注(0)|答案(1)|浏览(116)

从下面的代码中可以看到，我有一个按钮，我想转到下一个元素，如果该元素有子元素，则转到每个子元素，递归地遍历该容器div中DOM的所有级别。
我确实找到了递归函数来递归地操作所有的子函数，但是我想用按钮一个一个地进入它们。

var $currElement = $("#start");
$currElement.css("background", "red");

$("#nextButton1").click(function() {
  if (!$currElement.next().length) {
    // alert("No element found!");
    // return false;    
    $currElement = $currElement.parent();
    $currElement = $currElement.contents().next();
    $("div,p,li").css("background", "");
    $currElement.css("background", "red");
  }
  // if(!$currElement.next().children().length){
  //   $currElement = $currElement.contents().next();
  //   $("div,p,li").css("background", "");
  //   $currElement.css("background", "red");
  // }
  if (!$currElement.contents().length) {
    $currElement = $currElement.next();
    $("div,p,li").css("background", "");
    $currElement.css("background", "red");
  }
  $currElement = $currElement.contents().next();
  $("div,p,li").css("background", "");
  $currElement.css("background", "red");
});

div,
p {
  display: block;
  width: 110px;
  height: 40px;
  margin: 2px 8px 64px 8px;
  float: left;
  border: 1px blue solid;
}

#nextButton1 {
  display: block;
  padding-left: 50px;
}

li {
  border: 1px solid blue;
  padding: 10px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>jQuery next() example</h1>

<div id="start">This is div 1
  <div>div 1 child</div>
</div>
<p>This is paragrah 1</p>
<div>This is div 2
  <div>div 2 child</div>
</div>
<p>This is paragrah 2</p>
<div>
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
  </ul>
</div>
<div>This is div 3
  <div>div 3 child</div>
</div>

<br/><br/><br/>
<br/><br/><br/>
<button id="nextButton1">next</button>

提前感谢任何帮助。

jquery

来源：https://stackoverflow.com/questions/77449415/jquery-button-goes-to-next-element-in-dom-including-all-children

1条答案

按热度按时间

jogvjijk1#

将所有元素放在一个容器中，然后创建一个变量，以DOM顺序列出容器中的所有元素，并逐步执行，而不是直接在DOM中导航。

var $allElements = $("#container").find("div, p, li");
var curIndex = 0;

$("#nextButton1").click(function() {
  $(".selected").removeClass("selected");
  curIndex++;
  if (curIndex < $allElements.length) {
    $allElements.eq(curIndex).addClass("selected");
  }
});

div,
p {
  display: block;
  width: 110px;
  height: 40px;
  margin: 2px 8px 64px 8px;
  float: left;
  border: 1px blue solid;
}

#nextButton1 {
  display: block;
  padding-left: 50px;
}

li {
  border: 1px solid blue;
  padding: 10px 0;
}

.selected {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>jQuery next() example</h1>

<span id="container">
  <div id="start" class="selected">This is div 1
    <div>div 1 child</div>
  </div>
  <p>This is paragrah 1</p>
  <div>This is div 2
    <div>div 2 child</div>
  </div>
  <p>This is paragrah 2</p>
  <div>
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
  <div>This is div 3
    <div>div 3 child</div>
  </div>
</span>

<br/><br/><br/>
<br/><br/><br/>
<button id="nextButton1">next</button>

赞(0）回复(0）举报 2023-11-17

我来回答

jQuery按钮转到dom中的下一个元素，包括所有子元素

1条答案

相关问题

热门标签

最新问答