Question

在我的项目中，我有一个表，每个行都包含id和title作为数据属性

<tr data-id="1" data-title="title"><td id="td_title">some text</td></tr>

我使用jQuery来更新data-tile属性

$newTitle = 'newTitle';
$row_to_update = $("tr").find("[data-id='1']");
$row_to_update.attr('data-title', newTitle );

所以在那之后，在html中我可以看到更新的值，但如果我试试这个：

$var = $row_to_update.data('title');
alert($var);

除非我再次加载页面，否则返回旧标题。我想我必须清除缓存，但我只找到$.domCache，这不适用于jQuery，也看到并试过

function clearjQueryCache(){
    for (var x in jQuery.cache){
        delete jQuery.cache[x];
    }
}

但显然不正确，因为一切都停止了工作

Answer 1

.find()方法允许我们搜索这些的后代 DOM树中的元素并从中构造一个新的jQuery对象匹配元素。 .find（）和.children（）方法类似，除了后者只在DOM树中向下移动一层。

$("tr").find("[data-id='1']"); tr没有[data-id='1']的元素可以找到它。所以不需要使用.find()

$newTitle = 'newTitle';
$row_to_update = $("tr[data-id='1']");
$row_to_update.data('title', $newTitle );
//then
$var = $row_to_update.data('title');
alert($var);  // the output should be newTitle

工作演示

$(document).ready(function(){
  $newTitle = 'newTitle';
  $row_to_update = $("tr[data-id='1']");
  $row_to_update.data('title', $newTitle );
  //then
  $var = $row_to_update.data('title');
  alert($var);  // the output should be newTitle
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr data-id="1" data-title="title"><td id="td_title">some text</td></tr>
<tr data-id="2" data-title="title"><td id="td_title">some text</td></tr>
</table>

Answer 2

而不是.data('title')，您可以使用.attr('data-title')。这可能有用。

使用jQuery在页面刷新之前未更新数据属性

2 个答案: