Question

我在jquery中有此代码，并且在td内部，当我单击他时我有一个称为arrow的div，我想切换下一个tr。但是这个div在td内部。我尝试使用nextUntil，但是只有当我单击整个TR时他才起作用，而我只想单击div箭头就希望它起作用。

        $('div.arrow').click(function(){
          $(this).nextUntil('tr.line-addendum').css('display', function(i,v){
            return this.style.display === 'table-row' ? 'none' : 'table-row';
          });
        });

        <tr class="line-validity">  
          <td class="field" nowrap> 
            <div class="arrow">
              <img src="/WebSoc/imagens/setaAudio.gif" alt="Associa" border="0">
            </div>
          </td>   
        </tr>
       <tr class="line-addendum"></tr>

因此，当我单击div箭头时，我想切换TR行的附录

Answer 1

要从td获取下一行，请使用：

 var tr = $(this).closest("tr");

要获取包含的tr，则可以使用tr.next()或同等版本。

请注意，.nextUntil将获得所有行直到匹配行（不包括匹配行）。要切换附录而不是它们之间的行，可以使用：

tr.nextAll(".line-addendum").first()

以获取匹配的附录。（这可能与您的确切要求不符，因此可以在问题中进行扩展）

提供（最多保留您的原始代码）：

$('div.arrow').click(function() {
  $(this)
    .closest("tr")
    .nextAll('tr.line-addendum')
    .first()
    .css('display', function(i, v) {
      return this.style.display === 'table-row' ? 'none' : 'table-row';
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="line-validity">
  <td class="field" nowrap>
    <div class="arrow">
     Associa
    </div>
  </td>
</tr>
<tr class="line-addendum" style='display:none'>
  <td>addendum</td>
</tr>
</table>

当我单击td内的specif元素时切换tr

1 个答案: