Selecting one <td> from a table

Question

I have a table which consist of user added data. All the 's added are added with a equal button. Like this:

<td> <form action="newBet.jsp" method="get"> <fieldset> <input class="button betButton1" id="Won" type="submit" name="W" value="&#10004;"/> <div class="closeEarlyForm" style="display:none;"> <input class="form-control" name="update1" type="number"/> <input class="button betButton1" type="submit" name="update" value="Close early"/> </div> <input class="closeEarlyLink" type="button" value="&#9998; Close early?"/> </fieldset> </form> </td>

This wokrs fine. Now, I want to add some jquery which toggle the hidden div element. This is where I run into troubles. I can't seem show the div element only on the clicked element. Instead it shows the hidden div element on all the td's.

$(document).ready(function(){ $(".closeEarlyLink").click(function(e){ e.preventDefault(); $(".closeEarlyForm").fadeToggle(); }); });

I know that my problem is that I select all the elements with the class, but I cant figure out how to only toggle/select the hidden element on the specific td.

stackoverflow.com/questions/55599051/… You should use closest() to get the fieldset and then find your nested div — Taplar
– Taplar, Commented May 18, 2020 at 19:54

Mamun · Accepted Answer · 2020-05-18 19:56:10Z

You can try using this keyword with parent() and find():

$(this).parent().find(".closeEarlyForm").fadeToggle();

Demo:

$(document).ready(function(){ $(".closeEarlyLink").click(function(e){ e.preventDefault(); $(this).parent().find(".closeEarlyForm").fadeToggle(); }); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <td> <form action="newBet.jsp" method="get"> <fieldset> <input class="button betButton1" id="Won" type="submit" name="W" value="&#10004;"/> <div class="closeEarlyForm" style="display:none;"> <input class="form-control" name="update1" type="number"/> <input class="button betButton1" type="submit" name="update" value="Close early"/> </div> <input class="closeEarlyLink" type="button" value="&#9998; Close early?"/> </fieldset> </form> </td>

thank you! This worked perfectly. Hope you dont mind, but "this" keyword in the code above points towards what? I can't really make sense of it, but it works :-) Just really wont to understand why!
@egx, this keyword refers to the currently clicked .closeEarlyLink:)
Got it. And then it will select the parent of that element which have closeEarlyForm class. Makse sense! Thank you :-)

Collectives™ on Stack Overflow

Selecting one <td> from a table

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related