CODEWITHSUNDEEP
javascriptjquerysvg
bsr
bsr

Reputation: 58662

Javascript/Jquery attribute selector

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.

Upvotes: 1

Views: 954

Answers (2)

entonio
entonio

Reputation: 2173

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.

Upvotes: 1

Atticus
Atticus

Reputation: 6720

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

Upvotes: 1

Related Questions