elegant way of changes div's a tag using jQuery

Question

User List

This is my user-list.

I need to change the red circular label.

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

When the document loads, get the number on (red) tag and change the label; next, a tag remove (change label from 21 to 20).

I want to improve this code.

My solution in a better way.

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

I use jade template engine, my jade code below..

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 조제우

Can you post the HTML code for the dropdown?

quik_silv
– quik_silv

2013-12-18 13:38:05 +00:00
Commented Dec 18, 2013 at 13:38 — quik_silv
– quik_silv, Commented Dec 18, 2013 at 13:38
Shouldn't you be using MutationObserver?

epascarello
– epascarello

2013-12-18 13:39:53 +00:00
Commented Dec 18, 2013 at 13:39 — epascarello
– epascarello, Commented Dec 18, 2013 at 13:39
$("#infoListBox .label").html($("#infoListBox a").length)

BlackPOP
– BlackPOP

2013-12-18 13:40:33 +00:00
Commented Dec 18, 2013 at 13:40 — BlackPOP
– BlackPOP, Commented Dec 18, 2013 at 13:40
That's a sexy list ;)

Patt Mehta
– Patt Mehta

2013-12-18 13:41:41 +00:00
Commented Dec 18, 2013 at 13:41 — Patt Mehta
– Patt Mehta, Commented Dec 18, 2013 at 13:41
@quik_silv Add Jade template codes

ChangJoo Park
– ChangJoo Park

2013-12-18 13:44:51 +00:00
Commented Dec 18, 2013 at 13:44 — ChangJoo Park
– ChangJoo Park, Commented Dec 18, 2013 at 13:44

Praveen · Accepted Answer · 2013-12-18 13:55:23Z

1

I guess $("#infoListBox .label") is representing a label or span. So use .text()

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

Updates: no need of above too, simply

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

Since getUserLength() already showing the length in the red circular label, so just call this method in DOMSubtreeModified event.

edited Dec 18, 2013 at 13:55

answered Dec 18, 2013 at 13:45

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ChangJoo Park Over a year ago

I use a tag because of my code based semantic-ui. using .text() , return [Object Object]. thanks @Praveen Jeganathan

Praveen Over a year ago

@ChangJuPark can you check $("#infoListBox .list").bind("DOMSubtreeModified",function(){ getUserLength(); }); since you already doing it in getUserLength() method.

Praveen Over a year ago

@ChangJuPark I'm glad I was able to help :)

BlackPOP · Accepted Answer · 2013-12-18 13:49:26Z

try this

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

thanks @Sidharthan but $("#infoListBox .list").bind("DOMSubtreeModified",function(){ getUserLength(); }); this is more simple

Collectives™ on Stack Overflow

elegant way of changes div's a tag using jQuery

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related