代码之家 › 专栏 › 技术社区 › Ian Vink

向有条件的儿童添加类

jquery-selectors jquery

Ian Vink · 技术社区 · 7 年前

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

我正在尝试添加类 isclosed 到与选择器匹配的项目的所有TDs tbody[role=rowgroup] tr Span 和一个班级是封闭的。

isclosed公司

2 回复 | 直到 7 年前

Barmar 7 年前

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

你可以写:

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

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

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

Daerik 7 年前

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