Get Class List For Element With Jquery

Get class list for element with jQuery

You can use document.getElementById('divId').className.split(/\s+/); to get you an array of class names.

Then you can iterate and find the one you want.

var classList = document.getElementById('divId').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
    if (classList[i] === 'someClass') {
        //do something
    }
}

jQuery does not really help you here...

var classList = $('#divId').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
    if (item === 'someClass') {
        //do something
    }
});

Get class name using jQuery

After getting the element as jQuery object via other means than its class, then

var className = $('#sidebar div:eq(14)').attr('class');

should do the trick. For the ID use .attr('id').

If you are inside an event handler or other jQuery method, where the element is the pure DOM node without wrapper, you can use:

this.className // for classes, and
this.id // for IDs

Both are standard DOM methods and well supported in all browsers.

Use jQuery to get a list of classes

Try this:

// get the unique list of classnames
classes = {};
$('#the_ul li').each(function() {
    $($(this).attr('class').split(' ')).each(function() { 
        if (this !== '') {
            classes[this] = this;
        }    
    });
});

//build the classnames
checkboxes = '';
for (class_name in classes) {
    checkboxes += '<label for="'+class_name+'">'+class_name+'</label><input id="'+class_name+'" type="checkbox" value="'+class_name+'" />';
};

//profit!

Jquery get specific class of element

Moving comments to answer:

Having "number after 'setwidth' could be any number" is not a good way to use CSS (it will not use CSS, but just uses the class attribute as data storage).

Use attributes, like data-width="200" etc instead if you want to adjust/obtain a width value from code.

You can fetch them with .data (data prefix assumed) or .attr('data-...)`

var width = ~~$element.data('width');

or

var width = ~~$element.attr('data-width');

Note ~~ is a very quick way to convert a string to an integer.

jquery get elements by class name

You can do it like this way:

$('.x:eq(0)').text('changed text');

or:

$('.x').eq(1).text('bbb');

both works well

sorry for my before answer..

How to make list of all classes in the page using jQuery?

jQuery has an attribute selector - choose only elements which have class atribute :)
Then split class attribute string (for cases like class="one two") and add them to array (dont forget to check if class is not empty or isnt already in the array. Use this.valueOf() for checking and saving the string :)

var classes = [];
$('[class]').each(function(){
    $($(this).attr('class').split(' ')).each(function() { 
        if (this.length>0 && $.inArray(this.valueOf(), classes) === -1) {
            classes.push(this.valueOf());
        }    
    });
});
console.log("LIST START\n\n"+classes.join('\n')+"\n\nLIST END");

JSFiddle link : http://jsfiddle.net/MWJKL/

jQuery- How to select a element with class name from a list of elements

You just need to figure out which selectors to use.

var targetColumns = $(elemClicked).closest("tr").find("td"); 

this goes up the DOM to the "tr" and selects the tds. If the elemClicked is inside a td you can select the tds with closest("td"), and then use siblings(".draftstatus");

If the elemClicked is a td, then you can just use siblings(".draftstatus");

Here is some example code to help demonstrate some selectors. Hope this helps some and not confused you more.

$(function(){            //reference all cells with myclass class using filter    $("#table1 tbody td").filter(".myclass").addClass("red");
    // click events for all tds reference the .target class cell using siblings    $("#table1 tbody td").on("click",function(e){        $(this).siblings(".target").toggleClass("red");    });         //items inside a table cell click event    $("#table1 tbody td a").on("click",function(e){      //toggle bold class        $(this).closest("td").siblings(".target").toggleClass("bold");          //prevent event from bubbling up           e.stopPropagation();    }); })

.red {    background-color:red;}
.bold { font-weight:bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" id="table1">    <tbody>        <tr>            <td>foo</td>            <td>bar</td>            <td class="myclass target">value2</td>            <td>Two <a href="#">link</a></td>        </tr>             <tr>            <td>foo</td>            <td>bar</td>            <td class="myclass target">value2</td>            <td>Two <a href="#">link</a></td>        </tr>          </tbody></table>

("div[id^='id_colours_on_deck_']").each(function(){
    $($(this).contents()[1]).text();
})

$('.testimonial').each(function(i, obj) {
    //test
});