jquery 遍历 div 和第一个“空”div

Posted 2023-03-16

【中文标题】jquery 遍历 div 和第一个“空”div

【英文标题】：jquery iterate through divs and first "empty" div

【发布时间】：2012-06-06 00:34:09

【问题描述】：

我有一个我正在开发的 jquery 应用程序，用户基本上点击一个项目并将项目移动到 equipped 部分。

我打算如何进行这项工作，当单击 equippable 类时，jquery 将查找 #weapons 下的第一个子 div，data-item 值为 0，并为其分配值equippable。

为了让您更好地了解正在发生的事情，这里是jsfiddle。

我原本打算使用 each 功能，但这会替换两个可用的设备插槽。我只需要能够找到第一个可用的插槽，或者如果没有可用的插槽，请发送警报，但我不确定如何找到第一个可用的插槽。

建议？

【参考方案1】：

$(document).ready(function() 
    $(".equippable").click(function() 
        $('#weapons')
              .find('div[data-item="0"]:first') // first div with data-item=0
              .attr('data-item', $(this).data('item')); // chage data-item value
    );
);

DEMO

你也可以这样做

$(document).ready(function() 
    $(".equippable").click(function() 
        $('div[data-item="0"]:first', '#weapons')  // first div with data-item=0
           .attr('data-item', $(this).data('item'))
    );
);

DEMO

【讨论】：

谢谢，正是我需要的。

【参考方案2】：

你的意思是像THIS?（我正在提醒第一个可用的文本属性）

你需要的选择器是这样的：

$('#weapons [data-item=0]:first')

所以要设置数据属性，你可以这样做：

$(document).ready(function()
    $(".equippable").click(function() 
        $('#weapons [data-item=0]:first').data("item", $(this).data("item"));
    ); 
);

​

【讨论】：

不，伙计，您对我的第二个答案的评论。我认为像你这样优秀的用户不应该像瞎子一样扔石头

@thecodeparadox 是的，我刚刚意识到我们实际上是基于他的 Fiddle，对此感到困惑抱歉：）

【参考方案3】：

我认为最简单的方法是为武器槽使用额外的类：

<div id="weapons">
    <div class="weapon_slot empty">No Equip</div>
    <div class="weapon_slot empty">No Equip</div>
</div>

然后先用代码清空：

$(document).ready(function()
    $(".equippable").click(function() 
        var empty_slots = $('#weapons div.weapon_slot.empty'),
            first_empty = $(empty_slots).filter(':first');

        if(first_empty.length > 0) 
            $(first_empty).removeClass('empty');
            // and whatever you also need to do here...
        
        else  /* Place for alert here */ 
    ); 
);

我刚刚更新了您的小提琴（抱歉，如果这是一个问题）并且它按原样工作 - 如果您单击项目 .empty 第一个元素中的类消失（因此您将添加的每个代码都将首先正确执行空元素）。

干杯！

【参考方案4】：

$(document).ready(function()
    $(".equippable").click(function() 
       var $emptySlot = $('#weapons').find('.no_equipment[data-item=0]')[0]; // Get the first empty slot
        $emptySlot.find('.no_equipment[data-item=0]').append(this);
        $emptySlot.data('item') = 1;
    );
);

​