Question

我正在尝试从一个范围中删除包含名为item的类的表行（TR）。

来自示例：

<table id='theTable'>
    <tbody>
        <tr>
            <td>John</td>
        </tr>
        <tr class='item'>
            <td>Google</td>
        </tr>
        <tr class='item'>
            <td>Microsoft</td>
        </tr>
        <tr class='item'>
            <td>Apple</td>
        </tr>
        <tr>
            <td>Obama</td>
        </tr>
        <tr class='item'>
            <td>USA</td>
        </tr>
    </tbody>
</table>

因此John有3个项目：Google，Microsoft和Apple。另一方面，Obama只有一个名为USA的项目。

也就是说，这意味着John 从开始，位置为0，结束于位置3（即项目类结束时））。

我要做的是删除范围为class item的TR。因此，如果我说我的start_index从位置0开始（这是John开始的位置），它应该从1到3的位置删除。

我的问题是只删除第一行项目。

Here's a JSFiddle that illustrates my problem

Answer 1

查看更新的jsfiddle，这应该符合您的需要

/*
  The possibilities for the start_index are:
      1) - John
      2) - Obama
      3) - Roma
*/
var start_index = 3
    current_index = 0;


$("#theTable > tbody > tr").each(function() {
    if($(this).hasClass('item') === false) {
        current_index++;
    } else if(current_index == start_index && $(this).hasClass('item')) {
        $(this).remove();
    }
});

Answer 2

为什么不使用.nextUntil()？

jsFiddle

可以选择一个选择器停止，所以只需传入你希望它通过兄弟姐妹，直到他们:not()拥有类.item。然后整个事情缩小到 -

var start_index = 1;
$("#theTable>tbody>tr").eq(start_index - 1).nextUntil(":not(.item)").remove();

但是，如果.item确实是与前一行相关的集合，那么如果它的结构是嵌套元素，那么您的信息在语义上会更好。

[编辑 - 如果您只希望索引与非.items相关联，那么请使用以下内容]

var start_index = 1;
$("#theTable>tbody>tr:not(.item)").eq(start_index - 1).nextUntil(":not(.item)").remove();

Answer 3

这样就可以了。它将删除所有具有类＆＃39;项目＆＃39;从你的桌子。

$('#theTable tr.item').remove()

Answer 4

你的情况稍有不妥，而不是在嵌套条件下面检查，你可以等待下一个元素并检查它。另外，.each()函数接受2个变量用于索引，其他用于值。
这是你的 Fixed Fiddle

/*
  The possibilities for the start_index are:
      1) - John
      2) - Obama
      3) - Roma
*/
var start_index = 1;

$(function () {
    $("#theTable > tbody > tr").each(function (_idx, _val) {

        if (_idx >= start_index) {
            console.log(_idx);
            if ($(this).hasClass('item')) {
                $(this).remove();
            } else {
                // Stops the loop
                return false;
            }
        }
    });
});

jQuery删除表行不按预期工作

4 个答案: