Question

编辑：它是一个TYPO，我已经超越了。请忽略此问题 我想在选中复选框时从li元素中的span中选择data-key属性。

<li class="result-set-list-item">
    <input class="result-select-checkbox" type="checkbox"></input>
    <span class="list-item-content" data-key="foobar">Das Foobar</span>
</li>

使用Javascript：

 $('#result-list-ul li').each(function () {
    if ($(this).find('.result-select-checkbox').attr('checked') == 'checked') {
     console.log($(this).children("span").first().data['key']); }
    ...

即使$(this).children("span")返回包含范围的有效数组，我也无法使用(this).children("span").first().data['key']

访问数据属性

在这种情况下我应该如何访问范围？我有很多元素，我不想为每个跨度实现一个id。

Answer 1

将其称为功能

$(this).children("span").first().data('key');

Answer 2

您可以使用.is（）和：检查是否选中了复选框
.data（）是一个函数，因此您需要调用该函数并将数据键作为参数传递给它

所以

$('#result-list-ul li').each(function () {
    if ($(this).find('.result-select-checkbox').is(':checked')) {//use :checked to see if checked
        console.log($(this).children("span").first().data('key'));//use () to call the data function
    }

缩短版

$('#result-list-ul li:has(.result-select-checkbox:checked)').each(function () {
    //will execute only for li's with checked items
    console.log($(this).children("span").first().data('key')); //use () to call the data function
})

Answer 3

data是jQuery中的方法，而不是object/array。通过传递密钥来使用它，如

console.log($(this).children("span").first().data('key'));

$('li').each(function() {
   console.log($(this).children("span").first().data('key'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<li class="result-set-list-item">
  <input class="result-select-checkbox" type="checkbox"></input>
  <span class="list-item-content" data-key="foobar">Das Foobar</span>
</li>

Answer 4

选择复选框

var cb = $('.result-select-checkbox:checked', this)

获取数据属性的值

$(cb).data('key')

查询 - 无法选择子数据属性（未定义）

4 个答案: