Question

＆＃13;

<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>

＆＃13;

我想从circle类中选择id并将该id作为背景颜色应用于同一个类。

我的jquery是：

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

但是当我这样做时，它只选择第一个span元素的id并将该id颜色应用于同一个类的所有其他span。任何想法我如何选择不同的ID，以便我可以在不同的跨度上有不同的背景颜色？

提前致谢

Answer 1

使用css()方法的匿名函数：

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

方法本身 - 就像大多数jQuery方法一样 - 迭代调用它的集合，在匿名函数this中指的是迭代移动的特定元素。

顺便说一下，原因是：

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

没有正常工作是因为每次重新选择整个集合，然后调用attr()方法的getter版本，当在集合上调用时，只返回结果该集合的第一个元素。

顺便提一下，当您有权访问DOM节点时，请不要使用jQuery来检索id：

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

和

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

只是昂贵的版本：

DOMElementReference.id;

参考文献：

css()。

Answer 2

尝试引用each：

上下文中的元素

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

Answer 3

我正在使用变量来让它更容易理解。 $（this）将引用每次迭代中的当前元素。我将它分配给'$ this'var，因此我们不会多次运行选择器。

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

Answer 4

以下是可行的代码 您的HTML中也存在错误，未正确放置跨度

<!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>

Answer 5

而不是：

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

是：

element.id

类似的东西：

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

如何获取元素的id并将其作为CSS属性应用？

5 个答案: