CODEWITHSUNDEEP
javascriptjqueryhtmlcss
gruler05
gruler05

Reputation: 31

How to get the id of an element and apply it as a CSS property?

<ul>
 <li>
  <span class="circle" id="beige"></span>
  <span>Beige</span>
 </li>
 <li>
  <span class="circle" id="black"></span>
  <span>Black</span>
 </li>
 <li>
  <span class="circle" id="blue"></span>
  <span>Blue</span>
 </li>
</ul>

I want to select the id from the circle class and apply that id as the background color to the same class.

My jquery is: 

$('span.circle').each(function (index, element) {
    $(element).css({
        'background-color': $('.circle').attr('id')
    });
});

But when i do this it only selects the id of the first span element and applies that id color to all the other span of the same class. Any idea how can i select different id so that i can have the different background color on different span?

Thanks in advance

Upvotes: 0

Views: 103

Answers (5)

Francisco Alvarez
Francisco Alvarez

Reputation: 1621

I'm using vars to make it easier to understand. $(this) will refer to the current element in the each iteration. I'm assigning it to a '$this' var so we don't run the selector multiple times.

$('span.circle').each(function() {
    var $this = $(this),
    elementId = $this.attr('id');
    $this.css({'background-color': elementId});
});

Upvotes: 0

Ritesh Karwa
Ritesh Karwa

Reputation: 2254

Here is the code that works There is a bug in your HTML too Span is not correctly placed

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Drag Me</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>

    <body>
        <ul>
            <li> <span class="circle" id="beige">
  <span>Beige</span>
</span>
            </li>
            <li> <span class="circle" id="black">
  <span>Black</span>
</span>
            </li>
            <li> <span class="circle" id="blue">
  <span>Blue</span>
</span>
            </li>
        </ul>
        <script>
            $(document).ready(function() {

                $('span.circle').each(function(index, element) {
                    console.log($(element).attr('id'));
                    $(element).css(
                        'color', $(element).attr('id'));
                });
            });
        </script>
    </body>

</html>

Upvotes: 0

karyku
karyku

Reputation: 1

Instead of:

$('.circle').attr('id')

is:

element.id

something like that :

$('span.circle').each(function(index, element) {
   $(element.id).css('background-color', element.id);
});

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

Use the css() method's anonymous function:

$('.circle').css('background-color', function () {
  return this.id;
});

The method itself - as do most jQuery methods - iterates over the collection upon which it was called, within the anonymous function this refers to the specific element over which the iteration is moving.

Incidentally, the reason that:

$('.circle').attr('id');

Didn't work properly is because each time you were re-selecting the whole collection, and then calling the getter version of the attr() method which, when called on a collection, returns only the result from the first element of that collection.

And, incidentally, when you have access to the DOM node don't use jQuery to retrieve the id:

$(DOMElementReference).attr('id');

And:

$(DOMElementReference).prop('id');

Are just expensive versions of:

DOMElementReference.id;

References:

Upvotes: 3

Kevin Boucher
Kevin Boucher

Reputation: 16675

Try referring to the element in the context of the each:

$('span.circle').each(function(index, element) {
    $(element).css({
        'background-color': $(element).attr('id');
    });
});

Upvotes: 1

Related Questions