jQuery - 定位兄弟、父级、后代和其它相关元素

Question

我进行了一个小的标记测试，用于切换div。

可以在这里找到一个（工作中的）模型：http://jsfiddle.net/obmerk99/d78aF/1/

问题是，我需要将Hide / Show链接放置在另一个div中，就像这样：

http://jsfiddle.net/obmerk99/d78aF/2/

..当我移动它时，尽管我尝试了很多方法，但它并没有起作用。

我已经尝试过：

jQuery(this).next().next('.toggle').toggle('slow');

和

jQuery(this).next('.toggle').toggle('slow');

以及许多其他方法，但这只是试错法——而我想要理解这个家族关系的本质（我猜我不是一个重视家庭的人，这影响了我的编码能力 :- )）

说到理解，在我的试验和错误中，我做了这个：

http://jsfiddle.net/obmerk99/d78aF/5/

这是不起作用的，但添加一个小的</br>突然使它工作了。

http://jsfiddle.net/obmerk99/d78aF/4/

空的</br>标签被认为是“兄弟姐妹”吗？

- Obmerk Kronen

---

感谢您使用fiddle解释问题的努力，但我认为仍然有些困惑。您能否用简单的语言解释一下您想要做什么？（暂时不考虑fiddle） - Atif

我想要的是从一个位于前一个DIV内部的链接切换一个DIV。 - Obmerk Kronen

Answer 1

尝试使用这个链接：http://jsfiddle.net/d78aF/6/

jQuery(this).siblings('.toggle').toggle('slow');

根据您的评论，您可以这样做：http://jsfiddle.net/d78aF/7/。该链接为IT技术相关内容，您可以点击查看。

jQuery(document).find('.toggle').toggle('slow');

new fiddle: http://jsfiddle.net/d78aF/8/

- Jai

---

谢谢您的回答，但是在您的Fiddle中，链接元素的位置与我的第一个（有效）示例完全相同。当我将其移动到上一个div时，它也无法正常工作（我的第二个示例）。 - Obmerk Kronen

好的，看起来这个可以工作，但整个标记都被改变了..整个第二个div被移动了。有没有一种方法可以在不移动第二个div的情况下只移动链接？ - Obmerk Kronen

是的，非常抱歉，我刚刚尝试了一下，在这个特定的例子上确实可以工作。谢谢。但是在真正的网站标记上，它仍然无法为我工作，但我想我还有其他未解决的问题。 - Obmerk Kronen

Answer 2

一个空的 </br> 标签是否被认为是“同级元素”？

你为什么不自己尝试一下呢？

<div id='firstEl'></div>
<br/>
<div></div>

<div id='siblings'></div>

然后在你的js代码中：

$(function(){
  $('#siblings').text($.makeArray($('#firstEl').siblings()).join(','));
});

结果：

[object HTMLBRElement],[object HTMLDivElement],[object HTMLDivElement]

你可以看到，<br/>元素被视为兄弟元素。

http://jsfiddle.net/EP5bj/

http://api.jquery.com/siblings/

- JohnJohnGa

---

谢谢，我在上面的示例中看到了这一点，只是不明白其中的“为什么”-但这是我的短板。同时，我如何以正确的方式针对我的问题中的正确div？ - Obmerk Kronen

Answer 3

你可以考虑采用更有针对性的方法，在 HTML 标记中指定要隐藏的 div。这是许多包（如 jQuery Mobile）常见的做法。

http://jsfiddle.net/turiyag/R5sDr/

<p class="hider" for="banks">Hide the banks!</p>

$(".hider").click(function(e) {
    var id = $(this).attr("for");
    $("#" + id).hide("slow");
    log("Hiding #" + id);
});

- turiyag

---

谢谢您的建议..但是这个标记是列表的一部分，该列表有许多具有相同类别但没有ID的项目。 - Obmerk Kronen