在jQuery中访问当前元素之前的元素答案

【问题标题】：Access the element before the current element in jQuery在jQuery中访问当前元素之前的元素
【发布时间】：2016-01-29 06:36:03
【问题描述】：

我有以下 HTML 表格。

<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
    <tbody>
        <tr role="row" class="odd">
            <td class="sorting_1">
                <input type="text" class="form-control" value=""> </td>
            <td>
                <input type="text" class="form-control" value=""> </td>
            <td>
                <input type="text" class="form-control" value=""> </td>
            <td class="center">
                <button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button>
            </td>
        </tr>
    </tbody>
</table>

当我单击“btn green”类的按钮时，我会通过使用委托事件处理程序生成一个新行，如下所示。

$('#sample_editable_1').on('click', ".btn green", function() {
    $(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');
});

但是，当我创建一个新行时，我需要前一行的“添加新”按钮消失。我可以在 jQuery 中使用 hide() 函数，但是如何访问上一行？以下操作无效。

$( row ).prev()

【问题讨论】：

我不认为这是一个委托事件处理程序
@YoYo : $('#sample_editable_1').on('click', ".btn green", function() {....} 绝对是一个委托事件处理程序。
哦，我的错..我认为 id 是按钮

标签： javascript jquery html html-table jquery-delegate

【解决方案1】：

你不能隐藏刚刚被点击的按钮，即

    $('#sample_editable_1').on('click', ".btn green", function() {
        $(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');
        $(this).hide();
    });

【讨论】：

【解决方案2】：

您可以使用this 上下文来hide() 被点击的按钮。此外，您的选择器不正确，应该是 ".btn.green" 而不是 ".btn green"

$('#sample_editable_1').on('click', ".btn.green", function() {
  $(this).hide();
  //Rest of the code
});

    $('#sample_editable_1').on('click', ".btn.green", function() {
      $(this).hide();
      $(".odd:last").after('<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> Add</button></td></tr>');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
  <tbody>
    <tr role="row" class="odd">
      <td class="sorting_1">
        <input type="text" class="form-control" value="">
      </td>
      <td>
        <input type="text" class="form-control" value="">
      </td>
      <td>
        <input type="text" class="form-control" value="">
      </td>
      <td class="center">
        <button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus">Add</i> 
        </button>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

我发现了一些东西，你可以试试这个，更多Read This one

$("#addrows").click(function () {
     $("#mytable").each(function () {
         var tds = '<tr>';
         jQuery.each($('tr:last td', this), function () {
             tds += '<td>' + $(this).html() + '</td>';
         });
         tds += '</tr>';
         if ($('tbody', this).length > 0) {
             $('tbody', this).append(tds);
         } else {
             $(this).append(tds);
         }
     });
});

【讨论】：

【解决方案4】：

试试这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
  <td class="sorting_1">
    <input type="text" class="form-control" value="">
  </td>
  <td>
    <input type="text" class="form-control" value="">
  </td>
  <td>
    <input type="text" class="form-control" value="">
  </td>
  <td class="center">
    <button id="sample_editable_1_new" class="btn green"> <i class="fa fa- plus">Add</i> 
    </button>
  </td>
</tr>
</tbody>
</table>

jquery：

 $('#sample_editable_1').on('click', ".btn.green", function() {
  $(this).hide();
  $(".odd:last").after('<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> Add</button></td></tr>');
});

jsfiddle：https://fiddle.jshell.net/f4ux0bcs/

【讨论】：