Question

I’ve got a jquery application I’m working on where users basically click on an item and it moves the item over to the equipped section.

How I was planning on making this work, was when a class equippable is clicked, jquery will look for the first child div under #weapons with a data-item value of 0 and assign it the value from the equippable.

To give you a better idea of what’s going on, here’s the jsfiddle.

I was originally going to use an each function, but that would replace both available equipment slots. I need to just be able to find the first available, or if there is not one available, send an alert and I’m not sure how to find that first available slot.

Suggestions?

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

DEMO

You can also do

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