私はこの問題を解決しようとしてきましたが、いくつかの重大な回避策なしでは解決できないようです。jquery next siblings
私は次のようなHTMLがある場合：
今<ul>
<li class="parent"> headertext </li>
<li> text </li>
<li> text </li>
<li> text </li>
<li class="parent"> headertext </li>
<li> text </li>
<li> text </li>
</ul>
を、どのように私は今ちょうど（そのことについて、又は第二の）最初の親、次の<li>タグを選択しますか？基本的には、class="parent"と次の兄弟で<li>を選択し、親クラスの別の<li>に到達します。
ネストされたリストでリストを再構成することはできましたが、そのようにしたくありません。助言がありますか？
あなたの問題の根本は、あなたが親として分類している<li> sが本当に<li>の「下に」彼らの両親はされていないということです。彼らは兄弟です。 jQueryには、実際の親と一緒に動作する多くの関数があります。あなたのマークアップを修正することをお勧めします。クイック、クリーン、メンテナンスが容易で、jQueryを使って何かを一緒に束ねるよりも意味的に正しいでしょう。
他のセレクタのいずれかが第2の親を選択し、それが次の兄弟であるので、それぞれを使用せずにこれを行う方法はないと思います。
function getSibs(elem) {
var sibs = [];
$(elem).nextAll().each(function() {
if (!$(this).hasClass('parent')) {
sibs.push(this);
}
else {
return false;
}
});
return $(sibs);
}
* shudder *素晴らしいアイデアだけど、自分で使うのは嫌だ。 :) –
haha、実際、これは回避策に近いです。atm :) * shame * – Contra
jQueryは特定の条件で停止する方法がわからないため、ループを自分で実行する必要があります。
jQuery.fn.nextUntil = function(selector)
{
var query = jQuery([]);
while(true)
{
var next = this.next();
if(next.length == 0 || next.is(selector))
{
return query;
}
query.add(next);
}
return query;
}
// To retrieve all LIs avec a parent
$(".parent:first").nextUntil(".parent");
しかし、あなたはもっと自分の親/子供のために実際に構造化されたリストの関係
<ul>
<li class="parent"> <span>headertext</span>
<ul>
<li> text </li>
<li> text </li>
<li> text </li>
</ul>
</li>
<li class="parent"> <span>headertext</span>
<ul>
<li> text </li>
<li> text </li>
</ul>
</li>
</ul>
うん、これはもっときれいだと分かった。誰かが言及したように、もっと使いやすくなっています。私はちょうどセレクタウィザードがあると思っていましたが、それを理解できませんでしたが、後で配列を操作しなければ可能ではないようです。 – Contra
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var fred = $("li").not('.parent').text();
$('#result').text(fred);
});
});
</script>
</head>
<body>
<a href="#">Click me</a>
<ul>
<li class="parent"> headertextA </li>
<li> text1 </li>
<li> text2 </li>
<li> text3 </li>
<li class="parent"> headertextB </li>
<li> text4 </li>
<li> text5 </li>
</ul>
<div id="result"></div>
</body>
</html>
を使用している可能性があり、実際に、あなたは簡単にnextUntil（）を使用してこれを行うことができます。 既に存在するので、あなた自身の "nextUntil"を書く必要はありません。
ex。 -
$(".a").nextUntil(".b");
またはヴィンセントにより示唆されるように -
$(".parent:first").nextUntil(".parent");
これは、質問の時間後に少し落ちたjQueryのバージョン1.4より前には存在しませんでした。しかし、ええ、これは今動作します:) – Contra
私は、これは非常に古いスレッドですけど、jQueryの1.4は、この目的のために有用である可能性nextUntilと呼ばれる方法で、持っている： http://api.jquery.com/nextUntil/
を
私はこれに同意するが、私は潜在的な解決策。 DOM関係が実際の関係と一致すると、はるかに簡単になります。 – tvanfosson
ええ、実際には、私はそれを投稿した後、 "親"クラス名が少し間違っていると考えました。それを「ヘッダー」と呼ぶ方が良いかもしれません。私はすべての後にネストされたリストを使用する必要があります – Contra
私は長期的にはよりよいアプローチだと思います。私はあなたが今それをやり直したくないことを知っていますが、あなたは後で自分自身に感謝するかもしれません。 –