在Jquery表中找到最接近的div

Question

我是新的jQuery，我正在尝试构建一个响应jQuery的简单选项卡。我知道这是一个常见的问题。但我现在无法解决这个问题。你能指导我做好的方法吗？我不知道那里的错误是什么。我尝试使用.closest，.parent，但是它仍然没有用。

<div class="sn_body_tab">
  <div class="sn_tab_title" id="sn_tab_title" >
    title 1
  </div>
  <div class="sn_tab_content" id="sn_tab_content">
    content 1
  </div>

  <div class="sn_tab_title">
    title 2
  </div>
  <div class="sn_tab_content" id="sn_tab_content">
    content 2
  </div>

  <div class="sn_tab_title">
    title 3
  </div>
  <div class="sn_tab_content" id="sn_tab_content">
    content 3
  </div>
  <script>
    $(document).ready(function () {
      $('#sn_tab_title').on('click', function (event) {
        $(this).closest('#sn_tab_content').slideToggle();
      });
    });
  </script>
</div>

Answer 1

首先，你应该永远不要有多个具有相同id的元素，在这种情况下sn_tab_content使用类。

由于sn_tab_content是sn_tab_title之后，您需要使用.next()而不是closest()

$(document).ready(function() {
  $('.sn_tab_title').on('click', function(event) {
    $(this).next('.sn_tab_content').slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sn_body_tab">
  <div class="sn_tab_title" id="sn_tab_title">
    title 1
  </div>
  <div class="sn_tab_content">
    content 1
  </div>

  <div class="sn_tab_title">
    title 2
  </div>
  <div class="sn_tab_content">
    content 2
  </div>

  <div class="sn_tab_title">
    title 3
  </div>
  <div class="sn_tab_content">
    content 3
  </div>
</div>

Answer 2

在整个HTML文档中，id应该是唯一的。但是您为div分配了相同的id（sn_tab_title和sn_tab_content）。

试试这个

<div class="sn_body_tab">
  <div class="sn_tab_title" >
    title 1
  </div>
  <div class="sn_tab_content">
    content 1
  </div>

  <div class="sn_tab_title">
    title 2
  </div>
  <div class="sn_tab_content">
    content 2
  </div>

  <div class="sn_tab_title">
    title 3
  </div>
  <div class="sn_tab_content">
    content 3
  </div>
  <script>
    $(document).ready(function () {
      $('.sn_tab_title').on('click', function (event) {
        $(this).closest('.sn_tab_content').slideToggle();
      });
    });
  </script>
</div>

Answer 3

使用next代替closest并使用class name like .sn_tab_title

$(document).ready(function() {
  $('.sn_tab_title').on('click', function(event) {
    $(this).next('.sn_tab_content').slideToggle();
  });
});

$(document).ready(function() {
  $('.sn_tab_title').on('click', function(event) {
    $(this).next('.sn_tab_content').slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sn_body_tab">
  <div class="sn_tab_title">
    title 1
  </div>
  <div class="sn_tab_content">
    content 1
  </div>

  <div class="sn_tab_title">
    title 2
  </div>
  <div class="sn_tab_content">
    content 2
  </div>

  <div class="sn_tab_title">
    title 3
  </div>
  <div class="sn_tab_content">
    content 3
  </div>
</div>

Answer 4

试试这个希望这会对你有帮助。

＆＃13;

＆＃13;

$(document).ready(function () {
      $(".result").text($(".sn_body_tab").closest("sn_body_tab").find('div').text());
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sn_body_tab">
  <div class="sn_tab_title" id="sn_tab_title" >
    title 1
  </div>
  <div class="sn_tab_content" id="sn_tab_content">
    content 1
  </div>

  <div class="sn_tab_title">
    title 2
  </div>
  <div class="sn_tab_content" id="sn_tab_content">
    content 2
  </div>

  <div class="sn_tab_title">
    title 3
  </div>
  <div class="sn_tab_content" id="sn_tab_content">
    content 3
  </div>
</div>
<div class="result">
</div>
</div>

＆＃13;

＆＃13;

＆＃13;