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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

编辑：如果您的结构包含多个带有services-article-elements-single个div的结构，则可以使用.closest()选择包装div，然后找到元素内部使用.find()函数的容器。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

假设你有多个'roll'，你需要使用特定于上下文的选择器 - 这意味着在事件处理程序中使用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内返回以查找相关详细信息。

如何在jquery中获取特定元素

4 个答案: