Question

$('tbody[role=rowgroup] tr').each(function() {
    if ($(this).has('SPAN.isclosed')) {
        $(this).find("td").addClass('isclosed');
    }
});

我正在尝试将类isclosed添加到与选择器tbody[role=rowgroup] tr相匹配的项的所有TD中，该选择器Span具有类isclosed。

这会将isclosed应用于每个td吗？

Answer 1

.has()没有返回布尔值，它返回与条件匹配的集合的所有元素。任何jQuery集合都是真实的。

你可以写：

if ($(this).has("span.isclosed").length > 0)

但只是在整个原始集合上使用.has()而不是使用.each()更简单。

('tbody[role=rowgroup] tr').has("span.isclosed").find("td").addClass("isClosed");

Answer 2

我知道这已经回答了，但我想用jQuery .toggleClass再展示两个例子。一个示例使用boolean作为state来确定是否添加或删除类名。另一个示例使用function来确定要添加的类名。

/* .toggleClass( className, state ) */
$('tbody[role="rowgroup1"] tr').each(function() {
    var condition = !!$(this).find('span.isclosed').length;
    $(this).find('td').toggleClass('isclosed', condition);
});

/* .toggleClass( function [, state ] ) */
$('tbody[role="rowgroup2"] tr td').toggleClass(function() {
    var condition = $(this).parents('tr').find('span.isclosed').length;
    if(condition) {
        return 'isclosed';
    }
});

/**
 * NOTE: $(this).length works with the IF statement only because
 * it returns either 0 or 1+, but you'll need a boolean for STATE.
 */

td.isclosed {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Test Table 1</h1>
<table>
    <tbody role="rowgroup1">
        <tr>
            <td>
                <span>Demo</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Demo</span>
            </td>
        </tr>
        <tr>
            <td>
                <span class="isclosed">Demo</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Demo</span>
            </td>
        </tr>
    </tbody>
</table>

<h1>Test Table 2</h1>
<table>
    <tbody role="rowgroup2">
        <tr>
            <td>
                <span>Demo</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Demo</span>
            </td>
        </tr>
        <tr>
            <td>
                <span class="isclosed">Demo</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Demo</span>
            </td>
        </tr>
    </tbody>
</table>

向具有条件的子项添加类

2 个答案: