Question

我在Stack Overflow网站上搜索但我能找到答案

如果<tr>中不再有<tbody>，则以下代码不会显示任何提醒，为什么会这样？

我确信以下内容应该有效，但没有任何反应：

<script>
  $('td > a').click(function(e){
  var this_elem = $(this);

  if( this_elem.hasClass("remove") ){
    this_elem.parent().parent().remove();
  }

  return false;

 });

 if( $("tbody > tr").length === 0 ){

  alert("No more rows of products...");

 }
</script>

HTML：

<table>
 <tbody>
  <tr>
   <td class="first-td">
    <img src="assets/product-image.jpg" alt="product image" />

    <div class="prod-desc-col">
     <h3>Samsung LE40C580J1 LCD HD 1080p Digital Television, 40 Inch with Built-in Freeview HD, Samsung LE40C580J1 LCD HD 1080p Digital Television, 40 Inch with Built-in Freeview HD</h3>
     <p>Product Code: 1254782</p>
     <p>In stock</p>
    </div>
   </td>
   <td>
    <input type="text" value="1" size="4" />
    <a href="#" title="Update" class="update">Update</a>
    <a href="#" title="Remove" class="remove">Remove</a>
   </td>
  </tr>
 </tbody>
</table>

Answer 1

由于您没有计算下一行行，因此您计算所有中tbody的所有行table在您的信息页中。

鉴于问题中添加了其他详细信息，我向您提供：

$('a.remove').click(

function() {
    $(this).closest('tr').remove(); // a slightly more concise form of your own code
    return false;
});

$('table tbody').bind('DOMNodeRemoved', function() {
    var c = $('table tbody tr').length;
    if (c === 1) { // testing against '1' because the count is performed before
                   // the row is actually removed from the DOM.
        alert("The final row is about to go.");
    }
});

JS Fiddle demo

Answer 2

页面中只有一个表吗？否则，您将计算页面中所有表中的所有行。

要计算行方式的行数，您可以在此处查看我的测试：http://jsfiddle.net/2DDZz/

编辑：

当你发布代码时，我发现你只是检查页面加载时的行数。每次删除行时都应该检查它：

$('td > a').click(function(e){
  var this_elem = $(this);
  if( this_elem.hasClass("remove") ){
    this_elem.parent().parent().remove();

    if( $("tbody > tr").length === 0 ){
      alert("No more rows of products...");
    }

  }
  return false;
});

Answer 3

您没有为我们提供太多信息，但我的第一个猜测是您的JQuery选择器在页面上的任何表中查找行。如果页面中有任何其他表，则可能会计算这些行。您需要做的是使您的JQuery选择器更具体。例如：

if( $(" #myTableName > tbody > tr").length === 0 ){
    alert("No more rows of products...");
}

请注意，我已向选择器添加了ID。这告诉JQuery只查找表中ID为“myTableName”的行。

Answer 4

也许您应该考虑使用nextAll

http://api.jquery.com/nextAll/

如何使用jQuery检查另一个元素/标记内是否没有元素/标记

4 个答案:

编辑：