如何更改jQuery中相邻td的数据属性？

我有这样的代码有两个TD列，如果我在足协图标如何更改jQuery中相邻td的数据属性？

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

然后我需要改变data-invoice-lock="0"点击。我想这

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

，但没有得到结果

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>

输出所需

<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>

来源

2017-08-10 Muhammad ali

请注明的答案为 '接受' 来完成这个discussin。你可以学习如何在[tour]（https://stackoverflow.com/tour） – Mohammad

最接近目标的td是tr。您应该将closest('td')更改为closest('tr')。该代码应改为

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

或者使用

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

如果您的HTML的结构是不变的。

来源

2017-08-10 07:46:51 Mohammad

试试这个：

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

来源

2017-08-10 07:48:47

您也可以用户data代替attr：

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

这里是工作示例：

$('.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>

来源

2017-08-10 07:57:07

一般而言，您需要找到最接近的tr，然后在此tr内找到您的元素。

但是我写了这个额外的答案，以引起您注意jQuery中的data()方法。使用这种方法，您可以操纵元素中的数据属性，如设置和获取值。为什么通常这次比使用attr()或prop()“更好”？

简短的回答：

使用数据（）可以返回一个JavaScript object可以包含很多keys和values，它是很容易处理。但是，当您使用data()而不是attr()时，您实际上不会在浏览器检查器中看到值的更改。但只需使用console.log()即可显示实际值，您将看到它正在发生变化。

下面的提琴具有两种测试方法的功能，但attr()现在已被注释掉。只是玩它，看看它是如何工作的。

在这里，你去与工作小提琴：

$(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>

来源

2017-08-10 08:02:25 hallleron

如何更改jQuery中相邻td的数据属性？

回答

相关问题