如何使用 JQuery 设置元素兄弟的 HTML答案

【问题标题】：How to set the HTML of an element's sibling with JQuery如何使用 JQuery 设置元素兄弟的 HTML
【发布时间】：2011-03-03 01:21:46
【问题描述】：

我有一个包含 3 个 DIV 元素的 DIV 块：upvote、votes 和 downvote。当我单击 upvote 或 downvote 并在 JQuery 代码块中调用 parent.html(html) 时，它会将投票计数覆盖在 upvote 或 downvote 图标上。我将使用哪个 JQuery 调用来访问 DIV 类“投票”？我会找到父元素的父元素，然后搜索“投票”类吗？有什么方法可以按名称查找元素的兄弟姐妹吗？很抱歉这个新手问题，但我对 JQuery 还是很陌生！

【问题讨论】：

标签： javascript jquery html parent this

【解决方案1】：

假设您的加价大约是：

<div>
    <div class="upvote">vote up</div>
    <div class="votes">0</div>
    <div class="downvote">vote down</div>
</div>

你可以使用：

$('.upvote').siblings('.votes');

或者：

$('.upvote').parent().find('.votes');

参考资料：

编辑以回应 OP 的问题（以 cmets 为单位）：

哦，不，有多个同级 '.votes' div 不是问题。问题是在给定页面上提交的内容不止一个，当您点赞一个时，其余的也会被点赞。我认为这就是为什么我需要使用 $this 或其他东西来仅使用选定的提交。有什么想法吗？

我不确定您所说的“给定页面上的多个提交”究竟是什么意思，但我假设您的意思很简单，就是页面上有多个投票元素。如果是这种情况（并且我假设加价与我在此答案第一部分中的近似值一致），您可以使用：

$('.upvote').click(
    function(){
        $(this).siblings('.votes');
        // this is just a selector, it won't 'do' anything
        // other than select the element.
        });

【讨论】：

感谢您的回复！除了更新所有“投票”类的部分外，这有效。有什么方法可以使用 $this 关键字来只更新选中的那个吗？
@John Smith：你能提供一个JS Fiddle 你当前的标记吗？
没问题！这段代码的问题在于它更新了所有“投票”类，而不仅仅是选定的类。 jsfiddle.net/cMPJX
@John Smith：谢谢，但我的意思是您的 html 标记... =) 我建议将各种“投票”divs 包装在他们的拥有div。这样就可以（或应该）只有一个兄弟'.votes'div被发现。
哦，不，有多个同级 '.votes' div 不是问题。问题是在给定页面上提交的内容不止一个，当您点赞一个时，其余的也会被点赞。我认为这就是为什么我需要使用 $this 或其他东西来仅使用选定的提交。有什么想法吗？

【解决方案2】：

在 jQuery 中有几种不同的方法可以访问特定的兄弟姐妹。有一个look at them all。你可能想要siblings()。

【讨论】：

【解决方案3】：

$('selector').siblings('.votes')

【讨论】：