セレクターを使用して要素を選択し、それに最も近い<p>
要素を選択します(pは前の要素とネストされていないことに注意してください)。どうすればいいですか?試しclosest()
ましたが、要素がネストされている場合にのみ機能します。
編集:最も近いの定義:
<a id="myelement"></a>
<p id="1"></p>
<p id="2"></p>
この場合、が問題の要素であるp#1
と仮定して、が選択されます。#myelement
セレクターを使用して要素を選択し、それに最も近い<p>
要素を選択します(pは前の要素とネストされていないことに注意してください)。どうすればいいですか?試しclosest()
ましたが、要素がネストされている場合にのみ機能します。
編集:最も近いの定義:
<a id="myelement"></a>
<p id="1"></p>
<p id="2"></p>
この場合、が問題の要素であるp#1
と仮定して、が選択されます。#myelement
HTMLが与えられた場合:
<a id="myelement"></a>
<p id="1"></p>
<p id="2"></p>
close()が機能しない理由は、次のとおりです。
現在の要素から始まり、DOMツリーを上に向かって、セレクターに一致する最初の要素を取得します。
'p'タグが常に次の要素になる場合は、代わりにnext()を使用してください。
$('#myelement').next();
a
ただし、タグと最初のタグの間に追加の要素が含まれる可能性がある場合は、p
それを取得する方法の1つとして、nextAll()を使用することです。
$('#myelement').nextAll('p').eq(0);
<p>
その要素を取得する方法は他にもたくさんあります。
http://jsfiddle.net/gpinto/PTFgG/1/
function findFirstParagraph() {
var siblings = $('#myElement').siblings();
siblings.each(function(index) {
if ( $(this).attr('id') == 1) {
$(this).css('background-color', 'red');
}
});
}
あなたの場合はどちらでも使用できます.siblings()
が、データが常に投稿した形式である場合は、より良い選択になると思います。.next()
.next
次に例を示します。
HTML
<a id="myelement">a</a>
<p id="1">1</p>
<p id="2">2</p>
jQuery
$("#myelement").click(function(){
console.log($(this).next("p").attr("id"));
console.log($(this).siblings("p")[0].id);
});
上記のコンソール ログ レポートと id の両方が表示されます1
。
試す.find()
同様のことを行う関数はたくさんありますが、私にとっては、$(this).find( 'selector here' )
またはのようなものを使用すると$(' id or class selector here').find('id/class here')
不思議に機能します笑。
幸運を
http://api.jquery.com/next/を使用してみてくださいnext()
最新のOP編集によると:jsfiddle.net/KXPwx/9
.next() または .prev().. .eq(0) を使用しますか??
.parent() または .parents('.selector') を使用することもできます