CODEWITHSUNDEEP
javascriptjquery
newbie
newbie

Reputation: 14950

Iterate through each html tag

I want to get each circle inside a div so i can resize it using jquery. My code is as follows:

<div id="DG_circles">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="75">
<desc>Created with Raphaël</desc>
<defs>
<circle cx="39" cy="39.5" r="16" fill="#d57b19" stroke="none" style="stroke-width: 0;" stroke-width="0">
<image x="28.8" y="29.3" width="22.4" height="22.4" preserveAspectRatio="none" href="load?name=icon-hotel-chart">
<text x="39" y="17.5" text-anchor="middle" style="text-anchor: middle; font: bold 9px Arial,Verdana,Courier; stroke-width: 0;" font="10px "Arial"" stroke="none" fill="#333333" font-size="9px" font-family="Arial, Verdana, Courier" stroke-width="0" font-weight="bold">
<circle cx="91" cy="39.5" r="16" fill="#b1102b" stroke="none" style="stroke-width: 0;" stroke-width="0">
<image x="80.8" y="29.3" width="22.4" height="22.4" preserveAspectRatio="none" href="load?name=icon-card-chart">
<text x="91" y="17.5" text-anchor="middle" style="text-anchor: middle; font: bold 9px Arial,Verdana,Courier; stroke-width: 0;" font="10px "Arial"" stroke="none" fill="#333333" font-size="9px" font-family="Arial, Verdana, Courier" stroke-width="0" font-weight="bold">
<circle cx="143" cy="39.5" r="16" fill="#85bb3c" stroke="none" style="stroke-width: 0;" stroke-width="0">
<image x="132.8" y="29.3" width="22.4" height="22.4" preserveAspectRatio="none" href="load?name=icon-airplane-chart">
<text x="143" y="17.5" text-anchor="middle" style="text-anchor: middle; font: bold 9px Arial,Verdana,Courier; stroke-width: 0;" font="10px "Arial"" stroke="none" fill="#333333" font-size="9px" font-family="Arial, Verdana, Courier" stroke-width="0" font-weight="bold">
</svg>
</div>​


var $circle = $('#DG_circles').find("circle");

$circle.each(function(index, value){
    if(index == 0){
        $this.attr("r", "24");
    } else if(index == 1){
        $this.attr("r", "20");
    } else if(index == 2){
        $this.attr("r", "18");
    }
});

But it doesn't change the "r" attribute of the circle. Please help. Thank you.

Upvotes: 1

Views: 214

Answers (3)

asawyer
asawyer

Reputation: 17808

Why do you even need to use each here?

var $circle = $('#DG_circles').find("circle");
$circle.eq(0).attr("r", "24");
$circle.eq(1).attr("r", "20");
$circle.eq(2).attr("r", "18");

Upvotes: 3

Dan Lister
Dan Lister

Reputation: 2583

Try....

var circle = $('#DG_circles').find("circle");

circle.each(function(index, value){
    if(index == 0){
        $(this).attr("r", "24");
    } else if(index == 1){
        $(this).attr("r", "20");
    } else if(index == 2){
        $(this).attr("r", "18");
    }
});

Upvotes: 1

Maxim Krizhanovsky
Maxim Krizhanovsky

Reputation: 26699

this is a dom element, not jQuery. You have to convert it to jQuery element in order to use jQuery functions.

$(this).attr('r', 24);

Upvotes: 1

Related Questions