3

我有一堆，<tr>其中一些包含<td>有class="myClass"但有些没有。所以它看起来像这样。

<tr>
<td class="myClass"></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

如果我在 a <tr>，我如何排成一行，直到我碰到最近的包含 a 的行td.myClass？有没有聪明的方法来做到这一点？我现在拥有的是一个检查 prev() 的 while 循环，如果它找到 .myClass，它就会中断。

4

3 回答 3

5 
$currentTr.prevAll(':has(td.myClass)').first()
于 2012-04-30T03:05:30.433 回答
1

这是另一种方法，可以找到与 myClass 类名最接近的 td。如果你想要 tr，你可以简单地获取它找到的父项：

var td$ = $("#myTable td.myClass");
$("#myTable td").click(function() {
    td$.removeClass("found");
    var temp$ = td$.add(this);
    var i = temp$.index(this);
    if (i > 0) {
        temp$.eq(i - 1).addClass("found");
    }
});

这会得到一个带有 myClass 的所有 td 的列表。然后它将单击的元素添加到该 jQuery 对象（添加后 jQuery 会将其排序为 DOM 顺序）。然后它会在该 jQuery 对象中找到被点击元素的索引，如果它不是第一个项目，它只会获取它之前的项目，这将是表中最接近的 td.myClass 对象。

工作 jsFiddle：http: //jsfiddle.net/jfriend00/XqLzb/

于 2012-04-30T04:36:30.473 回答
1

这是一个工作示例，不是很好，但是可以。http://jsfiddle.net/H2k8m/2/
1) 带有“color”类的 td 将被选中。
2）您可以使用它，也可以直接将所选对象分配给某个变量并在函数外部使用它。

HTML：

    <table>
        <tr>
        <td class="myClass">Hi</td>
        <td>world</td>
        </tr>

        <tr>
        <td class="myClass">1</td>
        <td class="myClass" >2</td>
        </tr>

        <tr>
        <td>3</td>
        <td>4</td>
        </tr>

        <tr>
        <td>5</td>
        <td>6</td>
        </tr>
</table>

CSS：

.color {
    background: #000;
    color: #fff;
}

table {
    cursor: pointer;
}

tr, td {
    min-width: 50px;
    border: 1px #000 solid;
    padding: 5px;
    text-align: center;
}

查询：

$(document).ready(function()
{
    $("table tr td").click(function() {
        if( $(this).prevAll('[class="myClass"]').length <= 0 ) {
            var parents = $(this).parent().siblings();
            for( i = $(this).parent().index(); i >= 0; i-- ) {
                parents.eq( i ).find(".myClass").last().addClass("color");
                if( parents.eq( i ).find(".myClass").length > 0) {
                    break;
                }
            }
         }
        else {
            $(this).prevAll('[class="myClass"]').first().addClass("color");
        }

    });

});
于 2012-04-30T03:51:41.450 回答