Question

Just wondering, could jQuery search for all inputs that have a CSS class of ‘.map’ and return the ID and class of the input into an array?

Example:

if I have the following input on my page:

<asp:TextBox ID="test" runat="server" MaxLength="12" Width="3em" CssClass="mapTest" />
<asp:TextBox ID="test1" runat="server" MaxLength="12" Width="3em" CssClass="mapTest1" />
<asp:TextBox ID="test2" runat="server" MaxLength="12" Width="3em" CssClass="mapTest2" />
<asp:TextBox ID="test3" runat="server" MaxLength="12" Width="3em" CssClass="mapTest3" />

Is it possible for jQuery to format the result in an array as below?

testArr[0] = 'test-mapTest';
testArr[1] = 'test1-mapTest1';
testArr[2] = 'test2-mapTest2';
testArr[3] = 'test3-mapTest3';

Also, in .net I have to use the following code <%= test.ClientID %> then it will only able to get me the correct ID number, so I’m not sure how can I in jquery then will only able to get the correct ID.

Answer 1

Sure it is!

var my_array = [];
$(":input[class^=map]").each(function(index, element) {
  my_array.push(element.attr("id") + "-" + element.attr("class"));
});

The above example uses jQuery’s .attr() method for accessing the element’s id and class attributes, solely for illustration purposes. It’s often faster and easier to read to access an element’s built-in attributes directly:

var my_array = [];
$(":input[class^=map]").each(function(index, element) {
    my_array.push(this.id + "-" + this.className);
});