Perform an action only on one element


if i have a webiste layout that has in it elements with same classes.
How can i perform a jQuery action only on one of them?

I have a button, that when i click on it i want only the table above it to slideDown/ fadeIn/ toggle and not the entire tables with the same classes on the page.

I want also not to give each table a unique id and to write the same function 10 times for each id.

thanks so much if you read so far you are great!


 <table class="table">
                   <td> 1 </td>
<td> 2 </td>
<td> 3 </td>

<div class="button">
               <a href="javascript: void(0)" class="btn btn-info play-it">Play It</a>


display: none;


  $("").on("click", function() {

You can use eq.

$('div').eq(0).on('click', () => console.log('hello')) // only the first element

hey @ghukahr

will it not trigger all elements who are the first child of a div?

No, because $('div') will get all div's in the document, the eq(0) will select the first only.

ok but then again i will have to write a function to select each div?

So I’ve read your post again and what I’d suggest is the following:

$(".button").on("click", function() {
  $(this).prev("table").css("background-color", "yellow");

As you can see we are selecting every .button, inside it with are selecting the previous table sibling with prev and changing its background.

Let me know if this helps.

thanks @ghukahr that was it! worked like magic