Question

我正在学习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模型的理解。您推荐哪些工具和文档？

Answer 1

问题是next()寻找html中的下一个元素。在您的情况下，您使用一堆BR标记作为分隔符，因此next()将是BR

最佳解决方案是使用您拥有的代码并删除BR标记并使用CSS来应用保证金以进行分离。

如果您保留BR代码，则可以使用index()方法

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

DEMO使用索引 http://jsfiddle.net/fUeZE/

Answer 2

使用jQuery的nextAll()遍历方法使用jQuery的.entrycontent遍历方法将所有下一个元素与$("a.entryheader").click(function(){ $(this).nextAll('div.entrycontent').first().show(); });类匹配，然后过滤到第一个找到的类似的方法

{{1}}

DEMO

有关.first()和.nextAll()

的更多信息

Answer 3

$(this).next('div.entrycontent')在您的情况下不会选择任何内容，因为在锚标记为<br />标记之后的下一个兄弟。我会移除<br />代码并在锚标记中添加一些margin-bottom来创建相同的效果，然后上面的.next代码就可以了。

大静态HTML和jQuery显示/隐藏

3 个答案: