jquery all.parent().not(/*first parent*/).data('bar')从第三个父级开始返回undefined

Question

我从昨天开始就在尝试解决这个问题，看起来像是jquery中的一个bug。

我正在编写一个排序脚本，其中有一个包含四列(<li>)的<header>，每个列都有一个<span>，我单击这些<span>就可以对数据进行排序。我希望第一个<span>在其他三个列之一排序时重置排序(具有data-sortby属性)，因此我需要一个条件(var isSet检查这三个列中是否有任何一个列具有数据属性sortby)：

​

// defaults (needed for getJSON())
var sort = 'coinranking',  // this is data-sorton
    order = 'desc'  // this is data-sortby

$(function() {

    $(document).on('click', 'article#coin-ranking > header > ul > li > span', function() {

        sort = $(this).data('sorton')

        var self = $(this),
            all = $('article#coin-ranking > header > ul > li > span'),
            isSet = all.parent().not('li.coin-profile').find('span').data('sortby')
        console.log(all);
        console.log(self);
        console.log(self.data('sortby')); // no problem here, as expected
        all.removeClass()
        all.not(this).removeData('sortby')
        console.log(isSet) // problem: returns undefined when it shouldn't
        if (self.data('sortby') === 'asc' || (self.parent().hasClass('coin-profile') && isSet)) {
            self.addClass('desc')
            order = sort === 'coinranking' ? 'desc' : 'asc'
            self.data('sortby', 'desc')
        }
        else {
            self.addClass('asc')
            order = sort === 'coinranking' ? 'asc' : 'desc'
            self.data('sortby', 'asc')
        }

        //getJSON().then(LoadHomeList)

    })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article id="coin-ranking">

    <header>

        <ul>

            <li class="coin-profile"><span data-sorton="coinranking" aria-label="sort">Cryptocurrency</span></li>
            <li class="coin-marketcap"><span data-sorton="marketCap" aria-label="sort">Market Cap</span></li>
            <li class="coin-price"><span data-sorton="price" aria-label="sort">Price</span></li>
            <li class="coin-change"><span data-sorton="change" aria-label="sort">24H Change</span></li>

        </ul>

    </header>

    <ul></ul>

    <footer></footer>

</article>

​

因此，如果我单击第二个<li>中的<span>几次，就会得到在console中打印出的期望值(最后两个console.log()会像预期的那样返回)。问题从第三个<li>开始，如果我单击这些<span>，那么最后一个console.log()会返回undefined，但前面的那个会返回期望值(在if /else中设置的值)。

显然，问题出在var isSet上。

我还准备了一个显示问题的小提琴：https://jsfiddle.net/chazy/su104cqz/

Answer 1

感谢@JJJ找到问题所在：

all.parent().not('li.coin-profile').find('span')总是找到相同的三个元素，.data()从第一个元素中获取数据。

因此，.data()只返回匹配元素集中第一个匹配元素的属性。在阅读文档时，它清楚地指出：

数据描述:为jQuery集合中的第一个元素返回命名数据存储区中的值，该值由data (名称、值)或HTML5

-*属性设置。

为了解决这个问题，我决定使用.filter().length

isSet = all.parent().not('li.coin-profile').find('span')
        .filter(function() { return $(this).data('sortby') }).length