在'this'

Question

当我点击标题时，我想在表格中添加一个切换事件。

我有这种HTML：

<div class="processs">
    <span class="process_title">
        <b>Title</b>
    </span>
    <br>
    <table>...</table>
</div>
<div class="processs">
    <span class="process_title">
        <b>Title 2</b>
    </span>
    <br>
    <table>...</table>
</div>
<div class="processs">
    <span class="process_title">
        <b>Title 3</b>
    </span>
    <br>
    <table>...</table>
</div>

所以我试过

$('.process_title').click(function(e)
{
  $(this).next('table').toggle();
  console.log('test');
});

我也试过.closest但是没有用

Answer 1

来自.next() method上的jQuery文档：

  

.next() - 在匹配元素集合中获取紧跟每个元素的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

它不起作用，因为table元素不是紧随其后的兄弟元素。

您可以使用.nextAll()，然后使用链.first()来获取该集合中的第一个匹配项：

$('.process_title').click(function(e) {
  $(this).nextAll('table').first().toggle();
});

＆＃13;

＆＃13;

$('.process_title').click(function(e) {
  $(this).nextAll('table').first().toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="processs">
  <span class="process_title">
        <b>Title</b>
    </span>
  <br>
  <table>
    <tr>
      <td>Table1</td>
    </tr>
  </table>
</div>
<div class="processs">
  <span class="process_title">
        <b>Title 2</b>
    </span>
  <br>
  <table>
    <tr>
      <td>Table2</td>
    </tr>
  </table>
</div>
<div class="processs">
  <span class="process_title">
        <b>Title 3</b>
    </span>
  <br>
  <table>
    <tr>
      <td>Table3</td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

当然，您也可以使用$(this).siblings('table')，但这会选择所有兄弟table元素，而不是第一个兄弟table。

Answer 2

试试$(this).siblings('table')。目前你只抓取下一个元素，但上面的代码将改为抓取任何标记类型表的兄弟。

正如其他人所提到的，如果table元素中有更多.process个标记，则会失败。关闭你的HTML看起来并非如此，但总的来说，我建议你在你想要的table元素中添加一个类，这样你才能抓住那个。

通常最好使用类或ID而不是标记名称，因为上面的问题会出现

Answer 3

您还可以使用parent或closest，如下所示：

$('.process_title').click(function(e){
  $(this).parent().find('table').toggle();
  //OR
  $(this).parents('.processs').find('table').toggle();
  //OR
  $(this).closest('.processs').find('table').toggle();
});

希望这有帮助。

＆＃13;

＆＃13;

$('.process_title').click(function(e){
  $(this).closest('.processs').find('table').toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="processs">
    <span class="process_title">
        <b>Title</b>
    </span>
    <br>
    <table>
      <tr>
      <td>....</td>
    </tr>
  </table>
</div>
<div class="processs">
    <span class="process_title">
        <b>Title 2</b>
    </span>
    <br>
    <table>
      <tr>
      <td>....</td>
    </tr>
  </table>
</div>
<div class="processs">
    <span class="process_title">
        <b>Title 3</b>
    </span>
    <br>
    <table>
      <tr>
      <td>....</td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;