使用 jQuery 更改 div 的标签的优雅方式答案

【问题标题】：elegant way of changes div's a tag using jQuery使用 jQuery 更改 div 的标签的优雅方式
【发布时间】：2013-12-18 13:35:55
【问题描述】：

这是我的用户列表。

我需要更改红色圆形标签。

$("#infoListBox .label").text($("#infoListBox a").length);
$("#infoListBox .list").bind("DOMSubtreeModified",function(){
    $("#infoListBox .label").text($("#infoListBox a").length);
});

文档加载时，获取（红色）标签上的数字并更改标签；接下来，移除标签（将标签从 21 更改为 20）。

我想改进这段代码。

我的解决方案更好。

function getUserLength(){
    return $("#infoListBox .label").text($("#infoListBox a").length);
}
// user count
getUserLength();
$("#infoListBox .list").bind("DOMSubtreeModified",function(){
    $("#infoListBox .label").val(getUserLength());
});

我用的是jade模板引擎，下面是我的jade代码..

div(id='infoListBox').ui.fluid.vertical.menu
  div.header.item Users
    a.ui.red.circular.label
  div.list.item
    a.item Me
    a.item 조제우
    a.item 장형주
    a .item 남중민
    a.item Me
    a.item 조제우
    a.item 장형주
    a.item 남중민
    a.item Me
    a.item 조제우

【问题讨论】：

你能贴出下拉菜单的 HTML 代码吗？
你不应该使用 MutationObserver 吗？
$("#infoListBox .label").html($("#infoListBox a").length)
这是一个性感的名单 ;)
@quik_silv 添加 Jade 模板代码

标签： javascript jquery

【解决方案1】：

我猜$("#infoListBox .label") 代表label 或span。所以使用 .text()

$("#infoListBox .label").text(getUserLength());

更新：上面也不需要，简单

$("#infoListBox .list").bind("DOMSubtreeModified",function(){
    getUserLength();
});

由于getUserLength() 已经在红色圆形标签中显示了长度，所以只需在DOMSubtreeModified事件中调用此方法即可。

【讨论】：

我使用标签是因为我基于代码的语义 ui。使用 .text() ，返回 [Object Object]。谢谢@Praveen Jeganathan
@ChangJuPark 你能检查一下$("#infoListBox .list").bind("DOMSubtreeModified",function(){ getUserLength(); });，因为你已经在getUserLength() 方法中做了。
@ChangJuPark 很高兴能帮上忙 :)

【解决方案2】：

试试这个

function getUserLength(){
return $("#infoListBox a").length;
}

getUserLength();
$("#infoListBox .list").bind("DOMSubtreeModified",function(){
$("#infoListBox .label").html(getUserLength());
});

【讨论】：

感谢@Sidharthan 但$("#infoListBox .list").bind("DOMSubtreeModified",function(){ getUserLength(); }); 这更简单