Question

我有一个奇怪的问题。

请在此处找到我的标记：

<div class="box" id="1">
    <h2>Three Days at the Movies (MOV)</h2>
    <div class="subtitle">
        <div class="slots">
            <h3>Count: <span class="in"></span> of <span class="total">30</span></h3>
        </div>
        <div class="leader">B Jesus</div>
    </div>
    <ul class="ui-sortable" style="height: 120px;"><li data-flags="0" id="524">
    <div class="left">Becky Jesus <span>(Vipers)</span></div>
    <div class="right">
        <span class="first">MOV</span>
        <span class="second">MAD</span>
        <span class="third">TTC</span>
        <span class="fourth">BEA</span>
        <span class="fifth">DOG</span>
        <span class="flags good">0</span>
    </div>
</li><li data-flags="1" id="1146">
    <div class="left">Tyler Jesus <span>(11JC)</span></div>
    <div class="right">
        <span class="first">MOV</span>
        <span class="second">MAD</span>
        <span class="third">TTC</span>
        <span class="fourth">BEA</span>
        <span class="fifth">DOG</span>
        <span class="flags good">1</span>
    </div>
</li><li data-flags="15" id="1093">
    <div class="left">James Jesus <span>(11JC)</span></div>
    <div class="right">
        <span class="first">MOV</span>
        <span class="second">MAD</span>
        <span class="third">DOG</span>
        <span class="fourth">BEA</span>
        <span class="fifth">TTC</span>
        <span class="flags bad">15</span>
    </div>
</li></ul>
</div>

我一直在使用以下代码来计算我的UL中LI元素的数量，然后将其显示在h3 > span.in中。该代码还执行了许多与jQuery UI Sortable提供的拖放可排序效果相关的其他事情，但我认为它们并不重要或妨碍它们。

$('ul').each(function() {
    var $count = $(this).prev('.slots').children('.in');
    var $total = $(this).prev('.slots').children('.total');
    var elements = $(this).children('li').length;
    $count.text(elements);

    if( parseInt( $count.text() ) > parseInt( $total.text() ) )
        $count.addClass("exceeded");
    else
        $count.removeClass("exceeded");
    var rowHeight = 20;

    if( $(this).children('li:first').height() )
        rowHeight = $(this).children('li:first').height();

    var height = ((elements+3) * rowHeight);
    $(this).css("height",height);

    //  Re-sort, order by flags
    var $ul = $(this),
        $li = $ul.children('li');
    $li.sort(function(a,b){
        var an = parseInt( a.getAttribute('data-flags') ),
            bn = parseInt( b.getAttribute('data-flags') );
        if(an > bn) {
            return 1;
        }
        if(an < bn) {
            return -1;
        }
        return 0;
    });
    $li.detach().appendTo($ul);
});

我无法访问正确的span进行更新。我已经尝试了prev和prevAll，以及closest。我可以访问subtitle DIV和slots DIV，但我无法访问后者中的h3或span元素。

奇怪的是，我发誓盲目这个代码在我两个月前查看它时正在运行。现在，它根本没有。

jsFiddle在这里：http://jsfiddle.net/7t6y8av0/

Answer 1

这是正常的，因为prev元素是.subtitle，所以如果你想访问.slots，请使用以下方法：

var $count = $(this).prev().find('.slots .in');

Answer 2

您可以使用

var $count = $(this).parent('.box').find('.in');
var $total = $(this).parent('.box').find('.total');

你甚至可以创建一个包装变量，这样你就可以在不用每次搜索dom的情况下使用它。

var wrapper = $(this).parent('.box');
var $count = wrapper.find('.in');
var $total = wrapper.find('.total');

通过这种方式，您可以使用.box包装器查找所需的任何子元素，而不会出现任何问题。

无法使用prev，prevAll或最近访问SPAN类

2 个答案: