1

我正在尝试选择类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函数，因为页面上有不止一组这些选择元素。

4

2 回答 2

0

您的方法不起作用，因为.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));
            }
        }
    }
});

香草 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;
            }
        }
    }
}
于 2013-03-29T04:24:11.233 回答
0

有没有办法在不先返回父元素的情况下选择元素

不适用于您当前的代码。如果您有时有一个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>

这将允许您的脚本与元素类型无关，并且您可以使用最接近的（）安全地编写代码，例如，类似于以下内容：

$('.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 - 使用类来识别容器

于 2013-03-29T04:39:36.463 回答