-1

私の最後の質問からわかるように、私はjQueryを学んでいます。今、私は本当に大きな静的htmlをもう少しナビゲートできるようにしようとしています。

htmlの一部：

<a class="entryheader">...</a><br /><br />
<div class="entrycontent">...<br />
<p class="entryfoot">...</p>

<a class="entryheader">...</a><br /><br />
<div class="entrycontent">...<br />
<p class="entryfoot">...</p>

私のJS：

$("a.entryheader").click(function(){
 alert("clicked");
 $(this).next("div.entrycontent").show();
});

Entrycontentはデフォルトで非表示になっており、ユーザーがentryheaderをクリックした場合にのみ表示されます。

entryheaderをクリックするとメッセージボックスが表示されますが、entrycontentは表示されません。

$（this）.nextに対してさまざまなアプローチを試しましたが、うまくいきませんでした。

おそらく私はDOMモデルの理解が不足しています。どのようなツールとドキュメントをお勧めしますか？

4

3 に答える 3

4

問題はnext()、html内の次の要素を探すことです。あなたの場合BR、セパレータとしてたくさんのタグを使用しているのでnext()、BR

最善の解決策は、お持ちのコードを使用してBRタグを削除し、CSSを使用して分離のためのマージンを適用することです。

タグを保持する場合は、メソッドBRを使用できますindex()

$("a.entryheader").click(function(){
     var index=$("a.entryheader").index(this)
     $("div.entrycontent").eq(index).show();
});

インデックスを使用したデモ http://jsfiddle.net/fUeZE/

于 2012-10-16T11:48:59.303 に答える
2

コードで目的を達成するもう1つの方法は、jQueryのnextAll()トラバーサルメソッドを使用して、次のすべての要素をのクラスと照合しますが、その.entrycontentように最初に見つかった要素だけにフィルタリングします。

$("a.entryheader").click(function(){ 
    $(this).nextAll('div.entrycontent').first().show();
});

デモ

.first（）および.nextAll（）の詳細

于 2012-10-16T11:55:11.003 に答える
0

$(this).next('div.entrycontent')アンカータグの次の兄弟がタグであるため、ケースでは何も選択されません<br />。タグを削除<br />し、アンカータグにmargin-bottomを追加して同じ効果を作成すると、.next上記のコードが機能します。

于 2012-10-16T11:50:24.383 に答える