Choosing ID + any number in jquery

Question

I am new to stackoverflow and jQuery in general, so I am having small issues with a simple function.

I have a random number of links on my website with id "filtro" + "some number" , and I want to write only one code for the click action in any of them (which will later affect the class with the same "filtrate" + " some number ").

For example: Click "# filterro3", do something on ".filtro3".

The problem is that I don’t know how to write a string in jQuery for "any number". I am thinking of doing something like this:

 $(function () { $("#" + "filtro" + SOME NUMBER).click(function () { //Do something with the element "." + "filtro" + SOME NUMBER }); }); 

Any ideas? Thanks!

Ps: This is my first question, and I apologize if I made any mistakes.

---

solvable. The dystroy solution worked like a charm.

In the future, referring to others, I will make this code to create a simple filter menu for the image gallery . Thus, I could hide / show photos of certain topics.

Answer 1

It seems you want

 $(function () { $("[id^=filtro]").click(function () { var num = this.id.slice(6); // if there is a risk of ambiguity, you might check here that +num==num var $elem = $('.filtro'+num); ... }); }); 

Explanations:

• $("[id^=filtro]") uses starts with a selector to select all elements whose identifier begins with "filtro"
• this.id.slice(6); accepts part of the identifier starting with the sixth character. Perhaps this would be clearer than this.id.slice('filtro'.length) or this.id.substring('filtro'.length)

Answer 2

There are some good answers to your initial question, but I would like to offer a potentially cleaner alternative.

You can use data-* attributes instead of identifiers to select your items. For example, your items may look like

 <a data-filtro=6 href='...'>link</a> <a data-filtro=7 href='...'>link</a> <a data-filtro=8 href='...'>link</a> 

Then you can select these elements with $('[data-filtro]') and use $(this).data('filtro') inside the callback. For example,

 $("[data-filtro]").click(function() { var ele = $(this); var num = ele.data('filtro'); // do whatever you want with num }); 

This method is used in many places, including the framework. This makes it easy to extract your behavior into a separate plugin that is independent of item identifiers. As the application becomes more complex and the number of attachments to each element increases, each element will look like

 <a data-filtro=6 data-foo data-bar href="...">link</a> 

instead

 <a id="filtro-6_and_bar_and_foo" href="...">link</a> 

Answer 3

If the id element and the class elements you want to change are the same, then it should be as simple as using the id element as input for the selector class:

Using your code as a base:

 $(function () { $("[id^=filtro]").click(function () { $("." + $(this).prop("id")).some_method_here(); }); }); 

For example, I assume that the target elements are <div> ., This will cause any <div> elements with the appropriate class to appear in red text:

 $(function () { $("[id^=filtro]").click(function () { $("div", "#filterTest").css("color", "#000000"); $("." + $(this).prop("id")).css("color", "#FF0000"); }); }); 

Since I see that you are new to jQuery.,.

• As dystroy said, $("[id^=filtro]") selects all elements that have id , which begin with a "filter".
• $(this).prop("id") gets the id current element (i.e. the one that was just clicked)
• $("." + $(this).prop("id")) takes an id value and makes it part of the class selector, adding "." to the beginning. This will select all elements with a class value that will be the same as the id value of the element you clicked.

Edit:. Instead of $(this).prop("id") you can use this.id (standard JavaScript), which is just a jQuery way to accomplish the same thing.

Answer 4

 $("[id^=filtro]").click(function() { $('.someClassName'+ this.id.match(/\d+/) ).toggle(); }); 

Live demo

^ in [id^=filtro] - the "Starts with" selector, which will match any element with which the ID begins with filtro

Now let’s use a little regex to extract a number from an identifier,
this.id.match(/\d+/); gets the identifier name of this "clicked element" and gets all d+ numbers
This number is used to match your CLASS element selector.