如何获取jQuery中的特定元素

Question

我有HTML结构L

<div class="services-article-elements-single">
    <div class="services-article-description">
        <button class="services-article-read-more-btn">read more</button>
    </div>
    <div class="services-article-after-roll"></div>
</div>

我希望在单击按钮后我的<div class="services-article-after-roll"></div>

到目前为止，我有：

jQuery('.services-article-read-more-btn').click(() =>{
   // ????????
})

我认为合适的方法是find()但我不确定

Answer 1

只需选择您的元素。 在这种情况下，您可以按类选择元素 。 在我的简单示例中，按钮显示或隐藏div。

 $('.services-article-read-more-btn').click(function() { $(".services-article-after-roll").toggle(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="services-article-elements-single"> <div class="services-article-description"> <button class="services-article-read-more-btn">My button</button> </div> <div class="services-article-after-roll">MY DIV</div> </div> 

编辑：如果您的服务具有一个以上类class services-article-elements-single ，则可以使用.closest（）选择包装div，然后使用.find（）函数在该容器内查找元素。

 $('.services-article-read-more-btn').click(function() { var elementWrapper = $(this).closest(".services-article-elements-single"); elementWrapper.find(".services-article-after-roll").toggle(); }) 

 .services-article-elements-single { padding: 10px; margin: 10px; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="services-article-elements-single"> <div class="services-article-description"> <button class="services-article-read-more-btn">My button</button> </div> <div class="services-article-after-roll">MY DIV</div> </div> <div class="services-article-elements-single"> <div class="services-article-description"> <button class="services-article-read-more-btn">My button</button> </div> <div class="services-article-after-roll">MY DIV</div> </div> <div class="services-article-elements-single"> <div class="services-article-description"> <button class="services-article-read-more-btn">My button</button> </div> <div class="services-article-after-roll">MY DIV</div> </div> 

Answer 2

jQuery本身是一个允许选择元素的函数。 您可以只使用jQuery('.services-article-after-roll') ，您将获得元素。

jQuery('.services-article-read-more-btn').click(() => {
  const $servicesArticleAfterRoll = jQuery('.services-article-after-roll');
  // ... do stuff
})

Answer 3

要实现您的要求，可以使用DOM遍历。 在点击处理程序中，您可以使用closest()获取与引发事件的元素和要定位的元素最接近的公共父元素。 然后，您可以使用find()获取该元素，然后根据需要对其进行修改。 在下面的示例中，我只是切换一个类以隐藏/显示它们：

 $('.services-article-read-more-btn').click(function() { $(this).closest('.services-article-elements-single').find('.services-article-after-roll').toggleClass('show'); }) 

 .services-article-after-roll { display: none; } .services-article-after-roll.show { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="services-article-elements-single"> <div class="services-article-description"> <button class="services-article-read-more-btn">read more</button> </div> <div class="services-article-after-roll">After roll...</div> </div> <div class="services-article-elements-single"> <div class="services-article-description"> <button class="services-article-read-more-btn">read more</button> </div> <div class="services-article-after-roll">After roll...</div> </div> 

Answer 4

假设您有多个“滚动”，则需要使用特定于上下文的选择器-这仅意味着在事件处理程序中使用this选择器：

 $(".services-article-read-more-btn").click(function() { $(this).closest(".services-article-elements-single") .find(".services-article-after-roll") .fadeIn(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="services-article-elements-single"> <div class="services-article-description"> <button class="services-article-read-more-btn">read more</button> </div> <div class="services-article-after-roll" style='display:none;'>more info</div> </div> <div class="services-article-elements-single"> <div class="services-article-description"> <button class="services-article-read-more-btn">read more</button> </div> <div class="services-article-after-roll" style='display:none;'>more info</div> </div> 

其中.closest查找与该类（包含div）最接近的父级，然后.find在该div中向下查找相关的详细信息。