Question

我正在尝试选择课程this，然后在不首先遍历父that元素的情况下获取tr。

这是我的HTML：

<tr>
    <td>
        <div>some content</div>
        <select class="this">
            <option>1</option>
            <option>2</option>
        </select>
    </td>
</tr>
<tr>
    <td>
        <div>some content</div>
        <select class="that">
            <option>1</option>
            <option>2</option>
        </select>
    </td>
</tr>

这是我的jQuery：

$('.this').each(function () {
    var thisSelect = $(this),
        thatSelect = $(thisSelect).next('.that');

    console.log(thatSelect); // doesn't work
});

我尝试使用上面的代码，但它没有用。我正在使用each函数，因为页面上有多组这些选择元素。

Answer 1

您的方法不起作用，因为.next()仅从兄弟姐妹中选择。

的jQuery

这是一种利用$('select')按照它们在页面中出现的顺序返回它们的事实的方法。

jsFiddle

var selects = $('select');
selects.each(function (i, select) {
    if ($(this).hasClass('this')) {
        for (var j = i + 1; j < selects.length; j++) {
            if (selects.eq(j).hasClass('that')) {
                console.log(selects.eq(j));
            }
        }
    }
});

Vanilla JavaScript

如果您出于性能原因想要这样做，那么您应该使用vanilla JavaScript。

jsFiddle

var selects = document.getElementsByTagName('select');

for (var i = 0; i < selects.length; i++) {
    if (selects[i].className.match(/\bthis\b/)) {
        for (var j = i + 1; j < selects.length; j++) {
            if (selects[j].className.match(/\bthat\b/)) {
                console.log(selects[j]);
                break;
            }
        }
    }
}

Answer 2

有没有办法选择一个元素而不回到父元素元素第一

不是您当前的代码。如果有时候有一个tr，有时候另一个容器作为父容器，最简单的方法是将一个类或数据属性分配给父容器。

假设这是你可以做的事情，看起来就像这样：

<table>
    <tbody>
<tr class="container">
    <td>
        <div>this content</div>
        <select class="this">
            <option>1</option>
            <option>2</option>
        </select>
    </td>
</tr>
<tr class="container">
    <td>
        <div>that content</div>
        <select class="that">
            <option>1</option>
            <option>2</option>
        </select>
    </td>
</tr>
    </tbody>
</table>

这将允许您的脚本与元素类型无关，您可以使用closest()安全地编写代码，例如，类似于：

$('.this').each(function () {
    var $thisSelect = $(this),
        $thatSelect = $thisSelect.closest('.container').next().find('.that');

    console.log($thatSelect[0]);
});

以上内容也适用于以下HTML：

<div class="container">
    <div>this content</div>
    <select class="this">
        <option>1</option>
        <option>2</option>
    </select>
</div>
<div class="container">
    <div>that content</div>
    <select class="that">
        <option>1</option>
        <option>2</option>
    </select>
</div>

DEMO - 使用类来标识容器

有没有办法选择一个元素而不必先回到父元素

2 个答案:

的jQuery

Vanilla JavaScript