This submit elaborates on easy methods to return a category listing of a component with jQuery.
Find out how to Return a Class Record of an Aspect with jQuery?
To return the category listing of a component, use the built-in jQuery “attr()” technique or the “className” property. Using the desired technique and property is sort of easy and straightforward.
This part applies each of those approaches one after the other to get the category listing of the goal factor.
Technique 1: Use the “attr()” Technique to Get the Class Record of an Aspect
The jQuery “attr()” technique units and returns the attribute and their values of the desired HTML factor. On this technique, it’s used to get all of the lessons which might be utilized to a component.
HTML Code
First, take a look on the said HTML code:
<p>Welcome to Linuxhint!</p>
</div><br>
<button>Get Class Record</button>
Within the above code snippet:
- The “<div>” tag provides a “div” factor with an id “Div1”, lessons “First”, “Second”, and “Third”, respectively, and is styled utilizing the desired styling attributes i.e., peak, width, and border.
- The “<p>” tag embeds the given paragraph assertion.
- The “<button>” tag provides a brand new button.
jQuery Code
Now, let’s contemplate the given jQuery code:
<script>
$(doc).prepared(operate(){
$(“button”).click on(operate(){
var listing = $(“#Div1”).attr(“class”);
var arr = listing.break up(/s+/);
$.every(arr, operate(index, worth){
$(“physique”).append(“<p>” + index + “: “ + worth + “</p>”);
});
});
});
</script>
In keeping with the above code snippet:
- The primary “<script>” tag embeds the jQuery library CDN utilizing the “src” attribute from its official web site.
- The subsequent “<script>” tag defines a small script part that first applies the “prepared()” technique to execute the given operate when the given HTML doc will get prepared.
- Subsequent, the desired “click on()” technique related to the “button” selector executes the linked operate upon the button click on.
- After that, the “listing” variable applies the “attr()” technique to get the “class” attribute’s worth i.e., the category listing of the accessed “<div>” factor utilizing its id “Div1”
- Now, the “arr” variable applies the “break up()” technique that works on the “/s+/” sample to divide the “listing” variable worth into the array of substrings.
- Lastly, outline a callback operate “every()” to iterate over every index worth of the array and append them into the DOM.
Output
It’s seen within the above output that the given button exhibits the category listing of the accessed “<div>” factor together with the indexes with the assistance of the “attr()” technique.
Technique 2: Use the “className” Property to Return the Class Record of an Aspect
The “className” property helps to set and retrieve the category attribute worth of the desired HTML factor. Right here on this technique, it’s utilized to return the category listing of a component i.e., the category attribute’s worth.
HTML Code
First, overview of the next HTML code:
<p>Welcome to Linuxhint!</p>
</div><br>
<p>Press F12 to open the net console.</p>
This HTML code is similar because the “attr()” technique however with the elimination of a button, and an addition of a paragraph assertion ultimately with the assistance of the “<p>” tag.
jQuery Code
Subsequent, undergo the jQuery code:
<script>
$(doc).prepared(operate () {
$(“#Div1”).click on(operate () {
var getlist = this.className;
console.log(getlist);
});
});
</script>
In these code strains:
- The “click on()” technique is related to the “div” selector utilizing its id “Div1”.
- After that, the “getlist” variable applies the “className” property to get the category listing when the consumer clicks on the accessed “<div>” factor.
- Lastly, the “console.log()” technique shows the “getlist” variable’s worth i.e., class listing on the net console.
Output
On this output, the net console shows the category listing of the goal “<div>” factor when the consumer clicks on it.
Conclusion
To return the category listing of a component, use the jQuery “attr()” technique or the “className” property. The “attr()” technique units and retrieves all of the attributes and their values of an HTML factor together with indexes and the “className” property retrieves the “class” attribute immediately. This submit defined all of the doable strategies to return the category listing of a component with jQuery.
