Query - can't select childs data-attribute (undefined)

Question

EDIT: IT WAS A TYPO, I'VE OVERSEEN. Please ignore this question I want to select the data-key attribute from the span inside a li-element, when the checkbox is checked.

<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']); }
    ...

Even when $(this).children("span") returns an valid array including the span, I cannot access the data-attribute using (this).children("span").first().data['key']

How should I access the span in this case? I got lots of elements and I don't want to implement an id for each span.

Answer 1

像函数一样调用

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

Answer 2

1. You can use .is() and :checked to see whether the checkbox is checked
2. .data() is a function so you need to invoke the function and pass teh data key as an argument to it

So

$('#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
    }

A shortened version is

$('#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 is a method in jQuery and not an object/array . Use it by passing the key in like

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

To select the checked boxes

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

To get the value of the data attribute

$(cb).data('key')