添加一个 class 到 children 有条件

Question

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

我正在尝试将 class isclosed 添加到与选择器 tbody[role=rowgroup] tr 匹配的项目的所有 TD，其中 child Span class 关闭。

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

Answer 1

.has() 不是 return 布尔值，它 return 是集合中符合条件的所有元素。任何 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. One example uses a boolean as a state determining whether to add or remove a class name. The other example uses a function 来确定要添加哪个 class 名称。

/* .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>

添加一个 class 到 children 有条件

Adding a class to children with condition

jquery

jquery-selectors