Question

I have a div tag which looks something like this:

<div id="some id here" class="portlet portlet_15 portlet_content_15 new" >some content here</div>

I understand that I can get the id of this div using jquery like this:

$(this).closest("div").attr("id")

But how do I extract just the portlet_15 from the above class where 15 could be any number?

Here is an extract of the code showing where I am currently getting and sending off the id of the div:

$.ajax({
    url: 'some web service,
    type: 'POST',
    data: { strID:$(that).closest("div").attr("id"), strClass:"need to send the class value too right here, in this case it would be portlet_15" },
    error: function(xhr, status, error) {
        //some error message;
    },
    success: function() {
        //some success task
    }
});

I have included a note in the data part of the code above where the class should go.

Answer 1

Your existing code is a bit confusing, since you don’t tell what this refers to. If it refers to your particular div element, then using closest isn’t correct because that already traverses up the DOM hierarchy.

But otherwise if you’d like to get all those CSS classes of a particular element, this is what you have to call:

$(this).attr("class").split(" ");
// in your case this would return an array of classes:
// ["portlet", "portlet_15", "portlet_content_15", "new"]

this of course refers to the element in question. Then you can easily parse individual classes the way that you like. If you’d like to extract the number out, you’ll likely use a regular expression:

/portlet_(\d+)/i;

Use data- attributes

But as others suggested, getting data across would be much better if you’d do that using data-attributes as in:

<div id="some id here"
     class="portlet new"
     data-portlet="15"
     data-portlet-content="15">
         some content here
</div>

in this case both portlet-related classes are provided as data attributes, that you can easily access using:

$(this).data("portlet"); // would return 15
$(this).data("portletContent"); // would return 15
$(this).data("portlet-content"); // would return 15

The last two are variation of accessing the same data attribute with a hyphen’d name.