使用 jQuery.next() 選擇元素時遇到問題

Question

我是 jQuery 的新手，並且在使用 .next() 選擇器時遇到了問題。

當我單擊h3元素時，我的p元素上下滑動以顯示內容就好了。 但是，當我單擊h3時，我還希望 div <div class="sqs-block button-block sqs-block-button" data-block-type="53">也可以滑動。

我在頁面上有以下代碼的多個實例，所以當我單擊h3時，我需要關聯的p和 div 一起折疊。

 $("div > p").slideUp(); $("div.sqs-block.button-block.sqs-block-button").slideUp(); $("div > h3").click(function() { $(this).next("div > p").slideToggle("slow"); $("div.sqs-block.button-block.sqs-block-button").next().slideToggle("slow"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row sqs-row"> <div class="col sqs-col-5 span-5"> <div class="sqs-block html-block sqs-block-html" data-block-type="2"> <div class="sqs-block-content"> <h3 style="white-space:pre-wrap;">Title goes here</h3> <p class="sqsrte-small" style="white-space:pre-wrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p> </div> </div> <div class="sqs-block button-block sqs-block-button" data-block-type="53"> <div class="sqs-block-content"> <div class="sqs-block-button-container--left" data-animation-role="button" data-alignment="left" data-button-size="small"> <a href="" class="sqs-block-button-element--small sqs-block-button-element" data-initialized="true">Book me in!</a> </div> </div> </div> </div>

Answer 1

在使用 next 之前，您需要向上導航 DOM。

這是一種方法：

 $("div > p").slideUp(); $("div.sqs-block.button-block.sqs-block-button").slideUp(); $("div > h3").click(function() { $(this).next("div > p").slideToggle("slow"); $(this).parent().parent().next("div.sqs-block.button-block.sqs-block-button").slideToggle("slow"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row sqs-row"> <div class="col sqs-col-5 span-5"> <div class="sqs-block html-block sqs-block-html" data-block-type="2"> <div class="sqs-block-content"> <h3 style="white-space:pre-wrap;">Title goes here</h3> <p class="sqsrte-small" style="white-space:pre-wrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p> </div> </div> <div class="sqs-block button-block sqs-block-button" data-block-type="53"> <div class="sqs-block-content"> <div class="sqs-block-button-container--left" data-animation-role="button" data-alignment="left" data-button-size="small"> <a href="" class="sqs-block-button-element--small sqs-block-button-element" data-initialized="true">Book me in!</a> </div> </div> </div> </div>

Answer 2

一個非常常見的模式是使用closest()來查找一個共同的父元素，然后使用find()在該父元素中查找另一個元素

 $("div > p").slideUp(); $("div.sqs-block.button-block.sqs-block-button").slideUp(); $("div > h3").click(function() { $(this).next("p").slideToggle("slow"); $(this).closest('.col').find("div.sqs-block.button-block.sqs-block-button").slideToggle("slow"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row sqs-row"> <div class="col sqs-col-5 span-5"> <div class="sqs-block html-block sqs-block-html" data-block-type="2"> <div class="sqs-block-content"> <h3 style="white-space:pre-wrap;">Title goes here</h3> <p class="sqsrte-small" style="white-space:pre-wrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p> </div> </div> <div class="sqs-block button-block sqs-block-button" data-block-type="53"> <div class="sqs-block-content"> <div class="sqs-block-button-container--left" data-animation-role="button" data-alignment="left" data-button-size="small"> <a href="" class="sqs-block-button-element--small sqs-block-button-element" data-initialized="true">Book me in!</a> </div> </div> </div> </div>