寻找包含“.myClass”的最近的前一个兄弟元素。

Question

我有一堆<tr>，其中一些包含一个 <td>，其 class 属性为 class="myClass"，但有些则没有。因此它看起来像这样。

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

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

如果我在一个<tr>里，如何向上遍历行，直到找到最近的包含td.myClass的行？有没有聪明的方法来做这个？我现在有一个while循环，检查prev()，如果找到.myClass，就会中断。

- sameold

---

你是想用JS代码导航，还是只是想得到所有具有myClass类的<td>元素集合，例如$('td.myClass')？ - joshp

@joshp，不是最接近我的那一个。如果我想要所有的 $('td.myClass') ，我可以很容易地选择它。 - sameold

Answer 1

$currentTr.prevAll(':has(td.myClass)').first()

- Meligy

---

在 jsFiddle 的例子中，我是否漏掉了什么？首先，它使用的是列表而不是表格，正如 OP 的问题所要求的那样；其次，它不能在多个列表上工作。 - j08691

如果您不同意此内容，您可能希望进行编辑或删除。 - j08691

我看到它通常涵盖了prevAll()的想法，但无论如何，由于它会引起混淆，所以我将其删除了。 - Meligy

Answer 2

这是一个工作示例，不是很好，但可以使用。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;
}

Jquery：

$(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");
        }

    });

});

- KBN

Answer 3

这里有另一种方法，可以找到具有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/

- jfriend00