如何使用jQuery获取类名？

Question

Hey, I'm wondering how I can get the class names dynamically using jquery for the script below.

The HTML output looks like this:

<div id="main-info-1" class="maini">
     <p>this is a paragraph.</p>
</div>

So, I'm trying to get the class name dynamically instead of hard coded like it is above.

There are two parts where I need to get the class names in the jquery script:

1.) pc.children('div.maini').remove();

2.) maini_s = $('div.maini').remove();

As you can see the class 'maini' is hard coded and im unsure how to get the class name dynamically and put it properly in the script.

The jQuery file:

<script type="text/javascript">   
// make them global to access them from the console and use them
// in handlePaginationClick
var maini_s;
var num_of_arts;
var ipp;

function handlePaginationClick(new_page_index, pagination_container) {
    var pc = $(pagination_container);
    pc.children('div.maini').remove();
    for(var i=new_page_index*ipp; i < (new_page_index+1)*ipp ;i++) {
        if (i < num_of_arts) {
                pc.append(maini_s[i]);
        }
    }
    return false;
}

$(document).ready(function() {
    maini_s = $('div.maini').remove();
    num_of_arts = maini_s.length;
    ipp = 3;

    // First Parameter: number of items
    // Second Parameter: options object
    $("#News-Pagination").pagination(6, {
        items_per_page:ipp, 
        callback:handlePaginationClick
    });
});


        </script>

Any help on this would be awesome, thank you.

Answer 1

It depends on what you're after exactly.

You can get the class names using jQuery or plain javascript:

// jQuery
$myElement.attr('class');

// javascript
myElement.className

This will give you the string value of the class attribute of the element. If the element has more than one class (eg: <div class="foo bar"> ) the above methods will return "foo bar" . If you want an array of classes on an element, then you just need to split the result on whitespace:

var classes = myElement.className.split(/\s+/);
// classes = ["foo", "bar"]

Answer 2

使用jQuery获取该类名的方式如下：

$('#main-info-1').attr('class');

Answer 3

You can detect, add and remove classes without having to worry about splitting on whitespace when using multiple classes. And there's a convenient toggle too:

// toggle example
$('ele').toggleClass('active');

// toggle with optional bool parameter
$('ele').toggleClass('active', isActive );

// detect/add/remove classes without having to split on blank space " "
if ($('ele').hasClass('dull')) 
    $('ele').removeClass('dull').removeClass('productive');
else
    $('ele').addClass('fun').addClass('profitable');