如何獲取元素的id並將其應用爲CSS屬性？

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

我想選擇從圓類ID並應用ID作爲背景色相同的類。

我jQuery是：

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

但是，當我做到這一點只選擇第一跨度元素的ID，並應用ID顏色同一類的其他所有範圍。任何想法如何選擇不同的ID，以便我可以在不同的跨度上有不同的背景顏色？

在此先感謝

來源

2015-05-19 user1819887

'element'已經是你處理，所以'$（元素）.attr（ 'ID'）的跨度'應該得到你所需要的ID。 –

嘗試參照元素在each的背景：

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

來源

2015-05-19 16:58:05

在'each（）中是不是元素'本地DOM節點？我目前在iPad上，我不能輕易檢查，但我很確定它不是一個jQuery對象，而是集合中的節點？ –

是的，認爲你是對的。更新。 –

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

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

的方法本身 - 因爲這樣做大多數jQuery方法 - 在匿名函數內迭代所調用的集合3210指代迭代正在移動的特定元素。

順便說一句，原因是：

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

沒有正常工作是因爲每次你重新選擇整個集合，然後調用attr()方法的吸氣版本，當要求一個集合，僅返回該集合的第一個元素的結果。

而且，順便說一下，當你訪問DOM節點不使用jQuery檢索id：

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

和：

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

是剛剛昂貴的版本：

DOMElementReference.id;

參考文獻：

css()。

來源

2015-05-19 16:58:07

非常感謝你的工作！ – user1819887

非常歡迎，我很高興得到了幫助！ :) –

我使用vars使它更容易理解。 $（this）將引用每次迭代中的當前元素。我將它分配給'$ this'變量，所以我們不會多次運行選擇器。

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

來源

2015-05-19 17:03:22

這裏是工作 有太多跨度放置不正確

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

來源

2015-05-19 17:19:59

而不是在你的HTML中的錯誤代碼：

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

是：

element.id

類似的東西：

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

來源

2015-05-19 17:23:11 karyku

如何獲取元素的id並將其應用爲CSS屬性？

回答

相關問題