How to get the id of an element and apply it as a CSS property?
Question
<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
5 answers
solution1
3 2015-05-19 16:58:07
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:
-
css().
solution2
1 2015-05-19 16:58:05
Try referring to the element in the context of the each :
$('span.circle').each(function(index, element) {
$(element).css({
'background-color': $(element).attr('id');
});
});
solution3
0 2015-05-19 17:03:22
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});
});
solution4
0 2015-05-19 17:19:59
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>
solution5
0 2015-05-19 17:23:11
Instead of:
$('.circle').attr('id')
is:
element.id
something like that :
$('span.circle').each(function(index, element) {
$(element.id).css('background-color', element.id);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.