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

【问题标题】：jquery iterate through divs and first "empty" divjquery 遍历 div 和第一个“空”div
【发布时间】：2012-06-06 00:34:09
【问题描述】：

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

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

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

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

建议？

【问题讨论】：

标签： jquery css html 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;
    });
});

【讨论】：