jqueryはクラスと最も近い前の兄弟を見つけます


146

これが私が作業する大まかなHTMLです:

<li class="par_cat"></li>
<li class="sub_cat"></li>
<li class="sub_cat"></li>
<li class="par_cat"></li> // this is the single element I need to select
<li class="sub_cat"></li>
<li class="sub_cat"></li>
<li class="sub_cat current_sub"></li> // this is where I need to start searching
<li class="par_cat"></li>
<li class="sub_cat"></li>
<li class="par_cat"></li>

私はからトラバースし、.current_sub最も近い以前の.par_catものを見つけ、それに何かをする必要があります。

.find("li.par_cat")全体の負荷を返します.par_cat(ページに約30あります)。単一のものをターゲットにする必要があります。

本当にヒントをいただければ幸いです:)


7
うわー、猫は本当にインターネット上にいます!今、私たちはパー猫とサブ猫もいます。
JD Smith

回答:


257

試してください:

$('li.current_sub').prevAll("li.par_cat:first");

あなたのマークアップでそれをテストしました:

$('li.current_sub').prevAll("li.par_cat:first").text("woohoo");

一番近いものli.par_catを "woohoo"で埋めます。


カリムありがとう これもうまくいきましたが、.prevAllは以前に一致した要素をすべて取得し、必要な要素をフィルタリングするため、.prev()はリソースの消費が少ないと思います。エドの答えを受け入れる。
daulex

3
実際、少しテキストメッセージを送った後、いくつかのインスタンスで.prev()が失敗しました。.prevAll with:first、毎回動作しました。ありがとうございました。
daulex

1
.prev()は直前の要素のみをチェックします。jsFiddleの例示とともにコメントを以下の回答に追加しました。周りを見回した後、すべての要素を循環する必要があるので、これが最良の答えです。2つすべての関数を取得して、フィルターで検索する必要はありません。
David Hobs

8
これ:firstは、選択されたオブジェクトに最も近い(ページに対して上から下ではなく)開始された、返された要素のリストで作業していることを意味しますか?
NReilingh 2013年

2
非常に役立つ回答をありがとうございました。@NReilinghの質問に答えていただけませんか。ではない:firstの最初の要素を選択CSSセレクタDOM(例えばdiv.red:first最初の赤いDIV選択しますDOMを jQueryのは、異なるセレクタを解析しましたか)?
会計士م

17

試す

$('li.current_sub').prev('.par_cat').[do stuff];


19
待って、何?これは直前の要素だけをチェックしませんか?したがって、コードはnullを返しますか?-ここでは、jsFiddleでテストされています:jsfiddle.net/Y2TEH
David

4
@DavidHobs私がこれを2年前に書いた...私は確かに最近prevAll()を使用するでしょう。
Ed James

8
その場合、@ EdWoodcockは回答を更新することを検討してください。
Hugo Zink、2015年

14

prevUntil()を使用すると、すべてを取得する必要なく、遠くの兄弟を取得できます。prevAll()を使用すると、CPUに負荷がかかり過ぎる特に長いセットがありました。

var category = $('li.current_sub').prev('li.par_cat');
if (category.length == 0){
  category = $('li.current_sub').prevUntil('li.par_cat').last().prev();
}
category.show();

これは、一致する場合は最初の兄弟を取得します。一致しない場合は、一致する兄弟の前を取得します。そのため、prev()でもう1つバックアップして、目的の要素を取得します。


5

答えはどれも足りないと思います。私はこのようなものを使うことを好みます

$('li.current_sub').prevUntil("li.par_cat").prev();

:firstをセレクター内に追加しないで済むので、読みやすく、理解しやすくなります。prevUntil()メソッドはprevAll()を使用するよりもパフォーマンスが優れています


0

あなたはこのコードに従うことができます:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".add").on("click", function () {
            var v = $(this).closest(".division").find("input[name='roll']").val();
            alert(v);
        });
    });
</script>
<?php

for ($i = 1; $i <= 5; $i++) {
    echo'<div class = "division">'
        . '<form method="POST" action="">'
        . '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
        . '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
        . '</form></div>';
}
?>

これからアイデアを得ることができます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.