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