如何獲取元素的類名

Question

我有一個div的集合......

<div class='happy person'><img src='#' /></div>
<div class='fat person'><img src='#' /></div>
<div class='joyous person'><img src='#' /></div>
<div class='grotesque person'><img src='#' /></div>
<div class='sad person'><img src='#' /></div>

我選擇使用...

var people = $('.person')

結果存儲在類變量中。 jQuery 將此選擇的結果存儲為 HTMLDivElements 的數組 - 它們就是這樣。

稍后，我希望能夠查看此數組並針對每個元素的類做出一些決定。 我已經閱讀了一個可能的解決方案； 但這失敗了，因為我沒有直接處理 jQuery 對象。

如何在數組中獲取這些 div 的類名？

Answer 1

這應該工作：

var people = $('.person');
$.each(people, function(index, el) {
    var _this = $(el);
    if (_this.hasClass('happy')) {
        alert('Happy!');
    } else if (_this.hasClass('fat')) {
        alert('Fat!');
    }
});

Answer 2

我不確定你所說的“我沒有直接處理 jQuery 對象”是什么意思，因為$('.person')返回一個 jQuery 對象，它包含一個元素數組。

要獲取元素的類，只需在 jQuery 對象上使用.attr('class') 。 將它與.map()結合起來，您可以為每個元素創建一個僅包含類名的數組：

var classes = $('.person').map(function () {
    return $(this).attr('class');
}).get();

這將產生以下數組：

['happy person', 'fat person', ..., 'sad person']

Answer 3

摘自： http ://bytes.com/topic/javascript/answers/91636-getting-class-name-string，如果您不使用 jQuery，這可能值得一試。

function getClassName(obj) {
   if (typeof obj != "object" || obj === null) return false;
   return /(\w+)\(/.exec(obj.constructor.toString())[1];
}

Answer 4

div_attrs = node.attributes;
div_class = div_attrs.getNamedItem("class").value;

Answer 5

使用純 JavaScript 遍歷它們：

for (var i = 0; i < people.length; i++)
{
  var class = people[i].attr('class');
}

或者使用 jQuery：

people.each(function()
{
  var class = $(this).attr('class');
});

你知道有班級fat person不是班級fat person嗎？ 它繼承了fat和person的 CSS 屬性。 如果您需要這樣的類名，請使用下划線： fat_person 。

Answer 6

要獲取單個 div 上的所有類，請使用.attr函數。

var classes = myDiv.attr('class');  

這將返回元素上所有類的空格分隔列表。

如果要檢查特定類是否存在，請使用.hasClass() 。

var hasJoy = myDiv.hasClass('joyous');

Answer 7

 $(document).click(function(e){ var className = e.target.className; alert(className); });

 b{ background-color:lightgreen; padding:10px 20px; margin:20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <b class='class-one'>Class One</b> <b class='class-two'>Class-Two</b> <b class='class-three'>Class-Three</b>