jquery迭代通過div和第一個「空」div

我有一個jQuery應用程序，我正在處理用戶基本上點擊一個項目，它將項目移動到equipped部分。jquery迭代通過div和第一個「空」div

我是如何打算做這項工作，是被點擊一類equippable時，jQuery將尋找第一個孩子的div #weapons下與0一個data-item值，並將其分配從equippable值。

爲了讓您更好地瞭解發生了什麼，下面是jsfiddle。

我原本打算使用每個功能，但是這將取代兩個可用的設備插槽。我需要能夠找到第一個可用的，或者如果沒有可用的，發送警報，我不知道如何找到第一個可用的插槽。

對此提出建議？

2012-05-31 Eric

$(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

來源

2012-05-31 18:15:07 thecodeparadox

謝謝，正是我需要的。 – Eric

你的意思是像THIS?（我提醒中可用的第一個文本屬性）

你需要的選擇是這樣的：

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

因此要設置數據屬性，你可以這樣做：

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

來源

2012-05-31 18:12:27 mattytommo

你絕對錯了，夥計。 – thecodeparadox

@thecodeparadox錯在哪？這個答案？ – mattytommo

沒有隊友，你對我的第二個答案的評論。我認爲像你這樣優秀的用戶不應該像瞎子那樣扔石頭 – thecodeparadox

$(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; 
    }); 
});

來源

2012-05-31 18:17:55 eklhad

我認爲實現這一目標最簡單的方法是使用額外類FO [R武器插槽：

<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消失（因此您將添加的每個代碼將在第一個空元素上正確執行）。

乾杯！

來源

2012-05-31 18:23:33 Wirone

jquery迭代通過div和第一個「空」div

回答

相關問題