Javascript/Jquery attribute selector

Question

I need to find an element, which could be created dynamically and part of DOM, and change few of its attributes. I am trying it on svg elements, but your expertise in Javascript /Jquery would help me.

<svg id="cvs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" > <rect uid="id1" class="cont" x="0" y="0" width="200" height="200" /> </svg>

At run time, I add few more rect elements like

var el = document.createElementNS(svgNS,'rect'); //set the attribues including uid //say id2, id3 etc svg.appendChild(el);

Now, I need to write an update method, where it matches the rect elelement based on uid, sets all the attribues.

updateRect = function(properties){ $('rect[uid="' + properties.uid + '"]') { for (var p in properties) { this.setAttribute(p,prop[p]); } }

};

It is more of a pseudo code to show my intentions. I am not sure whether it would find the dynamically created elements as well. Is there a better logic? I don't have to use jQuery, but any JS sol would be highly appreciated.

Edit 1: The selector may be working, but I am bit lost in how can I chain the operation on the selected object.

something like,

var el = $('rect[uid="' + properties.uid + '"]') if el.exist() { //do the operation }

or a better way??? thanks... thanks, bsr.

Why don't you keep references in an object using the uid as a property name (key)? Then you just lookup the property on the object and there's you reference, no clunky selector necessary. — RobG
– RobG, Commented May 9, 2011 at 1:54
Rob.. that's a good comment.. let me think about how can I implement in my code... thanks — bsr
– bsr, Commented May 9, 2011 at 2:01

entonio · Accepted Answer · 2011-05-09 02:04:29Z

Iiuc what you wish to do is:

updateRect = function(properties){ $('rect[uid="' + properties.uid + '"]').each(function(i, el) { for (var p in properties) { el.setAttribute(p,prop[p]); } }); };

or

updateRect = function(properties){ $('rect[uid="' + properties.uid + '"]').each(function() { for (var p in properties) { this.setAttribute(p,prop[p]); } }); };

depending on whether you want to handle the jQuery wrapper or the DOM element.

thank you so verymuch.. if I am certain that there is only one element returns by jQuery selector (uid = unique id), is there a way I can avoid each, and still chain the operation.. for learning sake.. thanks again
Hi, glad it worked. I'm not a regular jQuery user, but iinm the $ function will return a list if there can be, conceptually, more than one result, so I don't think you can avoid each here, since there might be more than one rect with the same uid per SVG rules. But don't take this word as absolute.

Atticus · Accepted Answer · 2011-05-09 00:50:38Z

1

Sure it should find any newly added DOM elements -- not sure why it won't select it..

I would go into firebug and just type

$("rect") and see if anything shows up, then look into the attributes and see what's goin on

answered May 9, 2011 at 0:50

Atticus

6,75211 gold badges39 silver badges59 bronze badges

2 Comments

bsr Over a year ago

. thank you for the help.. can u please help me showing how can I chain the action on the selected object... I updated the question..

Atticus Over a year ago

did you console.log(p) and log(prop[p]) ? values registering as they should?

Collectives™ on Stack Overflow

Javascript/Jquery attribute selector

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related