Question

如何使用info_area选择btn？我已经尝试了下一步，找到和最接近的方法，因为我在其他问题中看到但是没有用。有什么建议吗？

$('.btn').on('click', function(event) {
  content = $(this).closest('.info_area')
  content.slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <div class="btn">
    info
  </div>
</div>
<div class="info_area">
  Some info...
</div>

Answer 1

nearest（）方法返回所选元素的第一个祖先。祖先是父母，祖父母，曾祖父母等等。您必须使用父选择器来获取item元素，并使用siblings或next来选择同一级别的元素：

content = $(this).parent().siblings('.info_area');
content = $(this).parent().next('.info_area');
content = $(this).parent().next();

示例：

$('.btn').on('click', function (event) {
    content = $(this).parent().siblings('.info_area');
    
    content1 = $(this).parent().next('.info_area');
    
    content2 = $(this).parent().next();

    //content.slideToggle();
    console.log(content.text());
    console.log(content1.text());
    console.log(content2.text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <button class="btn">
    info
  </button>
</div>
<div class="info_area">
  Some info...
</div>

Answer 2

.closest()遍历DOM的祖先，但你可以上升一个级别并使用.item中的siblings。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="btn">
    info
  </div>
</div>
<div class="info_area">
  Some info...
</div>

<script>
  $('.btn').on('click', function (event) {
    $(this).parent('.item').siblings('.info_area').slideToggle();
  });
</script>

＆＃13;

Answer 3

您可以使用.parent().siblings()

选择它

＆＃13;

$('.btn').on('click', function (event) {
    content = $(this).parent().siblings('.info_area');
    content.slideToggle();
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <div class="btn">
    info
  </div>
</div>
<div class="info_area">
  Some info...
</div>

＆＃13;

Answer 4

尝试：

<script>
  $('.btn').on('click', function (event) {
    var content = $(this).closest(".item").next(".info_area");
    content.slideToggle();
  });
</script>

Answer 5

请试一试。

<script>
  $('.btn').on('click', function (event) {
    var content = $(".info_area");
    content.slideToggle();
  });
</script>

选择下一个第一个div

5 个答案: