jquery - 最初に親要素に戻らずに要素を選択する方法はありますか

Question

クラスを選択してから、最初に親要素に移動せずthisに取得しようとしています。thattr

これは私の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')これは、ページに表示される順序でそれらを返すという事実を利用したメソッドです。

jsフィドル

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 を使用する必要があります。

jsフィドル

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

最初に親要素に戻らずに要素を選択する方法はありますか

現在のコードではありません。親として 1 つのコンテナーと別のコンテナーを使用する場合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>

これにより、スクリプトは要素の型にとらわれず、たとえば次のように、closed()を使用してコードを安全に記述できます。

$('.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>

---

デモ- クラスを使用してコンテナーを識別する

---