点击

Question

我正在尝试使用jquery <tr>和prev()检查next()它的第一个或最后一个元素，我尝试了这样的代码，但是这种方法不能达到预期效果。我如何检查<tr>最初和最后都没有兄弟姐妹。 欢迎提出任何建议。

$(document).ready(function(){

  $('.myTable tr .btn').click(function(){
    if($(this).parent('tr').prev().length == 0){
      alert('noPrev');
    }
    else if($(this).parent('tr').next().length == 0){
      alert('noNext');
    }
    else{
      alert('hello');
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='myTable'>
  <tr>
    <td>content a</td>
    <td>content b</td>
    <td>content c</td>
    <td><button class='btn'>click</button></td>
  </tr>
  <tr>
    <td>content a</td>
    <td>content b</td>
    <td>content c</td>
    <td><button class='btn'>click</button>
  </tr>
  <tr>
    <td>content a</td>
    <td>content b</td>
    <td>content c</td>
    <td><button class='btn'>click</button>
  </tr>
  <tr>
    <td>content a</td>
    <td>content b</td>
    <td>content c</td>
    <td><button class='btn'>click</button>
  </tr>
  <tr>
    <td>content a</td>
    <td>content b</td>
    <td>content c</td>
    <td><button class='btn'>click</button>
  </tr>
</table>

Answer 1

尝试此函数（注意将parent（）更改为nearest（）） - parent（）仅遍历DOM一次，到最近的祖先，nearest（）遍历DOM，直到找到与您的选择器匹配的第一个祖先

$(document).ready(function(){

  $('.myTable tr .btn').click(function(){
    if($(this).closest('tr').prev().length == 0){
      alert('noPrev');
    }
    else if($(this).closest('tr').next().length == 0){
      alert('noNext');
    }
    else{
      alert('hello');
    }
  });
})

Answer 2

如果一个元素是第一个或最后一个孩子，你可以查看jQuery：

$('.myTable tr .btn').on('click', function(){
    var $tr = $(this).closest('tr');
    if($tr.is(':first-child')){
      alert('first element');
    }
    else if($tr.is(':last-child')){
      alert('last element');
    }
    else{
      alert('somewhere in between');
    }
});

Answer 3

使用JQuery，您可以使用first（）和last（）

那样：

$(document).ready(function(){

  $('.myTable tr .btn').click(function(){
    if($(this).parents('.myTable tr').first().length == 0){
      alert('this is the first');
    }
    else if($(this).parents('.myTable tr').last().length == 0){
      alert('this is the last');
    }
    else{
      alert('hello');
    }
  });
})

Answer 4

您的代码只需使用＆＃34;父母（＆＃39; tr＆＃39;）＆＃34;不是父母（＆＃39; tr＆＃39;）

    $('.myTable tr .btn').click(function(){
      if($(this).parents('tr').prev().length == 0){
        alert('noPrev');
      }
      else if($(this).parents('tr').next().length == 0){
        alert('noNext');
      }
      else{
        alert('hello');
      }
    });