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

1

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.

answered May 9, 2011 at 2:04

entonio

2,1732 gold badges19 silver badges28 bronze badges

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

2 Comments

bsr Over a year ago

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

entonio Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related