CODEWITHSUNDEEP
jquery
Dan
Dan

Reputation: 1596

Check if element exists within DIV

I want to, on click, move an element inside a div unless it's already inside it. I was thinking something like...

Click tag > If element is in div do nothing > Else move element into div

http://jsfiddle.net/establish/Xhhe8/

HTML

<ul>
  <li><a href="#" class="tag">Art</a></li>
  <li><a href="#" class="tag">Computing</a></li>
  <li><a href="#" class="tag">Design</a></li>
</ul>

<div id="crate">
</div>

jQuery

$('.tag').on('click', function(event) {

if ($('#crate').has(this)) {
    // do nothing
}

else {

    $(this).appendTo('#crate');
}
});

It doesn't work. Also not sure how to represent 'do nothing', usually I just use a singular IF statement so no need to represent it. Can I do this to 'do nothing' and disable the click?

$(this).off();

Upvotes: 6

Views: 25346

Answers (6)

Fabio Kenji
Fabio Kenji

Reputation: 776

I would do the following, based on Alex's answer:

  $('.tag').on('click', function(event) {    
    if ($('#crate').find(this).length < 1) {
       $(this).appendTo('#crate');
       $(this).off('click')
    }
   });

I think the if clause makes more sense in this case; we're just checking if the crate element has 'this'.

The semantics of "if ($('#crate').has(this))" is misleading because we're expecting a boolean value when it actually returns an empty array, which evaluates to true in Javascript. So even if "#crate" has the actual element or not, the if condition is always true.

Upvotes: 0

adeneo
adeneo

Reputation: 318182

Me to!

Or this:

$('.tag').click(function() {
    if ( $(this).parent().attr('id') != "crate") {
        $(this).appendTo('#crate')
    }
});

http://jsfiddle.net/establish/Xhhe8/

Upvotes: 0

Alex
Alex

Reputation: 1668

You can try this (I just adjusted a bit of your code):

$('.tag').on('click', function(event) {

    if ($('#crate').find(this).length) {
        // do nothing
    }

    else {

        $(this).appendTo('#crate');
    }
});

Upvotes: 1

Blender
Blender

Reputation: 298106

You usually represent the opposite of an if statement with if not (i.e. replacing == with !=):

$('.tag').on('click', function(event) {
    if ($(this).parent().get(0) != $('#crate').get(0)) {
        $(this).appendTo('#crate');
    }
});

Instead of checking whether the element exists in the parent, why not compare parents?

Demo: http://jsfiddle.net/Xhhe8/3/

Upvotes: 1

jfriend00
jfriend00

Reputation: 707198

Gaby's answer will work, but I'd prefer structuring it without the empty if block like this:

$('.tag').on('click', function(event) {
    var self = $(this);
    if (self.closest('#crate').length == 0) {
        self.appendTo('#crate');
    }
});

Upvotes: 11

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195981

This should do it..

$('.tag').on('click', function(event) {

    var self = $(this);
    if (self.closest('#crate').length) {
        // do nothing
    }
    else {
        self.appendTo('#crate');
    }

});

Upvotes: 13

Related Questions