[SOLVED] Class Selector with jQuery

Question

I have a number of elements with the class name "progressor". I have in the JavaScript a global variable that I want to store the elements of this class name like so:

let bars = $(".progressor");

Later on I try to access this array and change the width property of the respective element, but it says that the jQuery width function is not a function at all. Like so:

bars[barNum].width("75%");
Error: Uncaught TypeError: bars[barNum].width is not a function

Using bars[barNum].css("width", "75%"); doesn't work either. Same error? Am I missing a simple jQuery thing here?

Edit: just to note, using document.getElementsByClassName("progressor") works by using:
bars[barNum].style.width = "75%";

Answer 1

For accessing specific elements within an array of class elements in JQuery, it seems that you would need to wrap the identifier within $() for it to work.

$(bars[barNum]).css("width","75%"); //Seemed to run

This is a stackoverflow question related to this that may also help you out - https://stackoverflow.com/questions/10479879/how-to-return-array-of-jquery-object-with-selector

Answer 2

You can use jQuery's .eq() method to get the element with a certain index.

Answer 3

Thank you Faisal ! I looked on stack overflow using a similar search, but came up with other answers.

Answer 4

Zeke Williams You're most welcome. 😏

Answer 5

For accessing specific elements within an array of class elements in JQuery, it seems that you would need to wrap the identifier within $() for it to work.

$(bars[barNum]).css("width","75%"); //Seemed to run

This is a stackoverflow question related to this that may also help you out - https://stackoverflow.com/questions/10479879/how-to-return-array-of-jquery-object-with-selector

x2

Answer 6

https://code.sololearn.com/WO4Cf7E4Af2p/?ref=app