Perform an action only on one element

hello

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!

html

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

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

css


.table{
display: none;
}

jQuery

  $("a.play-it").on("click", function() {
                   
                   $("table.table").slideDown(1000);
               })`

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