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

Question

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

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

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

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

建议？

Answer 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
    });
});

演示

你也可以做

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

演示

Answer 2

我认为实现这一目标的最简单方法是为武器槽使用附加类：

<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第一个元素中的项目类消失（所以你将添加的每个代码都将在第一个空元素上正确执行）。

干杯!

Answer 3

你是说像这样？（我提醒第一个可用的文本属性）

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

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

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

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

​</p>

Answer 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;
    });
});

​</p>