How to change data attribute of adjacent td in jQuery?

Question

I have a code like this with two td columns , if i click on the fa icon

<i class="fa pad5 fa-unlock-alt" ></i>

then i need to change the data-invoice-lock="0" . i tried this

$(this).closest('td').find('.invoiceCostCol').attr('data-invoice-lock','0');

but not getting the result

INPUT

<td rowspan="1" class="reportSmallWd invoiceCostCol" data-invoice-lock="1"></td>  
<td rowspan="1" class="reportSmallWd"> 
    <i class="fa pad5 fa-unlock-alt" ></i>
</td>

The OUTPUT required

<td rowspan="1" class="reportSmallWd invoiceCostCol" data-invoice-lock="0"></td>     
<td rowspan="1" class="reportSmallWd"> 
    <i class="fa pad5 fa-unlock-alt" ></i>
</td>

Answer 1

The closest of target td is tr . You should change closest('td') to closest('tr') . The code should changed to

$(this).closest('tr').find('.invoiceCostCol').attr('data-invoice-lock','0');

Or use

$(this).parent().prev().attr('data-invoice-lock','0');

If structure of your html is constant.

Answer 2

尝试这个：

 $(this).closest('tr').find('.invoiceCostCol').removeAttr('data-invoice-lock').attr('data-invoice-lock','0');

Answer 3

Well in general you need to find the closest tr and then find your element within this tr .

However I wrote this additional answer to call your attention to the data() method in jQuery. With this method you can manipulate data attributes in your elements like setting and getting values. Why is this often times " better " than using attr() or prop() ?

Short answer:

Using data() you can return a JavaScript object that can contain lots of keys and values and it is much easier to process. However when you use data() instead of attr() you won't actually see the change of a value in your browser inspector. But just use console.log() to show the actual value and you'll see it is changes.

The fiddle below features both methods for testing, however attr() is commented out at the moment. Just play with it and see how it works.

Here you go with the working fiddle:

 $(function(){ $('i.fa-unlock-alt').on('click', function(){ $(this).closest('tr').find('td.invoiceCostCol').data('invoice-lock','0'); //$(this).closest('tr').find('td.invoiceCostCol').attr('data-invoice-lock','0'); console.log($('td.invoiceCostCol').data('invoice-lock')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <table> <tr> <td rowspan="1" class="reportSmallWd invoiceCostCol" data-invoice-lock="1"> </td> <td rowspan="1" class="reportSmallWd"> <i class="fa pad5 fa-unlock-alt" ></i> </td> </tr> </table> 

Answer 4

You can also user data in place of attr :

$(this).closest('tr').find('.invoiceCostCol').data('invoice-lock', '0');

Here is working example:

 $('.pad5').click(function() { $(this).closest('tr').find('.invoiceCostCol').data('invoice-lock', '0'); alert($(this).closest('tr').find('.invoiceCostCol').data('invoice-lock')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <table> <tr> <td rowspan="1" class="reportSmallWd invoiceCostCol" data-invoice-lock="1"> </td> <td rowspan="1" class="reportSmallWd"> <i class="fa pad5 fa-unlock-alt"></i> </td> </tr> </table>