2

这通常是一件非常直接的事情，所以在你对这样的问题投反对票之前，请听我说完:)

我的问题不是选择元素并添加类，而是我希望将备用类添加到相对于该表的偶数行或奇数行。

现在我正在使用这个：

jQuery(document).ready(function(){

jQuery('table.rep tbody > tr td:first-child').addClass('composer');
jQuery('table.rep tbody > tr td:last-child').addClass('pieces');
jQuery('table.rep tbody > tr:odd').addClass('alt');

});

问题是 jQuery 正在使用“rep”类从所有表中选择所有行，然后将“alt”类添加到该集合中的奇数行。

就像我说的，我想让它把类应用到相对于每个表的偶数/奇数行，所以第一行的样式总是相同的。由于它使用上面的代码，第一行可以是 alt/normal，具体取决于上表中有多少行。

我正在考虑以某种方式使用该.each()功能，但是在查看了 jQuery 文档之后，我无法找到如何实现我想要的结果。

我想它可能看起来像这样：

jQuery('table.rep').each(function(){
    /* select/filter odd rows from this set and add alt class */
});

所以我的问题是是否.each()可以这样使用，如果可以，如何深入研究每次迭代的结果并让它做我想做的事情。

4

2 回答 2

2

你在这里.each():)

jQuery("table.rep").each(function(i,e)
            {
                $(e).find("tr:odd").addClass("alt");
            });
于 2012-06-18T17:36:31.427 回答
0

干得好..！永远记住 $(...).length 是找出过滤器或陷阱中有多少元素的关键... :-)

Javascript：

jQuery(document).ready(function()
{
    $('table.rep tbody > tr td:first-child').addClass('composer');
    $('table.rep tbody > tr td:last-child').addClass('pieces');
    $('table.rep').each(function()
    {
       //alert($(this).children('tbody').children(':odd').length)
       $(this).children('tbody').children(':odd').addClass('alt');
    });

});

HTML

<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>
        <tr>
            <td>composor #2.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.2</td>
        </tr>
    </tbody>
</table>
<br /><br />
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>

    </tbody>
</table>
<br /><br />
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>
        <tr>
            <td>composor #2.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.2</td>
        </tr>
    </tbody>
</table>

CSS

.composer {
    color:blue;
}
.pieces {
    color:green;
}
.alt {
    background-color:#ddd;
}
body {
    font-family:tahoma
}
.rep td {
    padding:2px;
}

我本可以避免添加 HTML，但不是为了使这篇文章（答案）自包含 - 我在这里添加它。

您可以在 jsfiddle 上查看演示：http: //jsfiddle.net/dharmavir/HfwqH/

于 2012-06-18T17:57:17.807 回答