1

在下面的代码中，我希望看到显示的 Red、Blue、Green 和 Brown 行，但是除了 Red 之外的所有行似乎都被隐藏了，就好像 nextUntil 参数被忽略了一样。有什么线索吗？谢谢。

经过一番研究，我都尝试了

$("#firstrow").nextUntil('span[class="hues"]').hide();

和

$("#firstrow").nextUntil('span:not(.colors)').hide();

的HTML：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"/>
        <script>
            $(document).ready(function() {
                $("#firstrow").nextUntil('span[class="hues"]').hide();
                //$("#firstrow").nextUntil('span:not(.colors)').hide();            
            });
        </script>
    </head>
    <body>
        <table id="colortable">
            <tr id="firstrow">
                <span class="colors">Red</span>
            </tr>
            <tr>
                <span class="colors">Orange</span>
            </tr>
            <tr>
                <span class="hues">Blue</span>
            </tr>
            <tr>
                <span class="shades">Green</span>
            </tr>
            <tr>
                <span class="colors">Brown</span>
            </tr>
        </table>
    </body>
</html>
4

1 回答 1

1

您的标记无效，tr元素应该只有td子元素。

<table id="colortable">
    <tbody>
        <tr id="firstrow">
            <td> 
                <span class="colors">Red</span>
            </td>
        </tr>
        ...
    </tbody>
</table>

Span 元素不是所选元素的兄弟元素，nextUntil仅过滤所选元素的下一个兄弟元素，您应该选择tr具有该特定 span 元素的元素：

// Select the all next sibling elements until the first element that matches the selector
$("#firstrow").nextUntil('tr:has(span.hues)').hide();

http://jsfiddle.net/KDKeF/

如果要选择与选择器匹配的所有下一个兄弟元素，可以使用nextAll方法：

// Select the all next sibling elements that match the selector
$("#firstrow").nextAll('tr:has(span.hues)').hide();
于 2013-05-01T16:17:49.657 回答