在不重新加载的情况下更改 Li 中的 Dom 元素？答案

【问题标题】：Changing Dom Element in Li without reloading?在不重新加载的情况下更改 Li 中的 Dom 元素？
【发布时间】：2015-07-20 14:13:42
【问题描述】：

我不知何故找不到根据投票更改 Li 对象的 Dom 元素的方法。

因此，用户可以为链接点赞，如果链接获得的点赞数比另一个点多，它应该会上升，直到它的点赞数少于下一个更高的点数。

这里是 Html 代码：

    <li>
    <span><span class="icon icon"></span><a href="http://"         
    rel="nofollow" target="_blank">Name</a> </span>
    <div class="right"><button>+</button><span id="displayCount">(0).  
    </span></div>
    </li>

    <li>
    <span><span class="icon icon2"></span><a href="http://" 
    rel="nofollow" target="_blank">Name</a> </span>
    <div class="right"><button>+</button><span id="displayCount">(0). 
    </span></div>
    </li>

还有 Js：

    $('button').click(function () {
    var newCount = parseInt($('#displayCount').text()) + 1;
    $('#displayCount').text(newCount);
    });

所以按钮确实计数，但是如果计数高于带有图标的 Li，我无法弄清楚如何实际更改带有图标 2 的 li，而无需重新加载页面。我怎么能做到这一点？

干杯，

朱利安

【问题讨论】：

ID 必须是唯一的。
您的意思是根据计数重新排列li 的顺序吗？
Sort an html list with javascript的可能重复
@atmd 是的，这就是我的意思。

标签： javascript jquery html

【解决方案1】：

    <li>
    <span><span class="icon icon"></span><a href="http://"         
    rel="nofollow" target="_blank">Name</a> </span>
    <div class="right"><button class="add">+</button><span class="displayCount">(0).  
    </span></div>
    </li>

    <li>
    <span><span class="icon icon2"></span><a href="http://" 
    rel="nofollow" target="_blank">Name</a> </span>
    <div class="right"><button class="add">+</button><span class="displayCount">(0). 
    </span></div>
    </li>

$('button.add').click(function () {
    var $element = $(this).parent().find('.displayCount:first');
    var newCount = parseInt($element.text()) + 1;
    $element.text('('+newCount+')');
});

【讨论】：