CODEWITHSUNDEEP
javascriptjqueryif-statement
Apostolos
Apostolos

Reputation: 8121

If clause not working correctly

I want to enter an if only if the value of a jquery object is empty and the dom element isn't a label or span. So i have

$('.container').children().each(function (index, item2){
    if ($(item2).val()=== '' && (item2.tagName.toLowerCase() !== 'label' || item2.tagName.toLowerCase() !== 'span')){
        //do stuff here
        console.log("tag: "+item2.tagName.toLowerCase());
    }
});

but in the console I get

tag: label

meaning that it's not working correctly. Am I missing something there?

Upvotes: 0

Views: 93

Answers (4)

Ishan Jain
Ishan Jain

Reputation: 8171

Your code is: 

$('.container').children().each(function (index, item2){
   if ($(item2).val()=== '' && (item2.tagName.toLowerCase() !== 'label' || item2.tagName.toLowerCase() !== 'span')){           
     console.log("tag: "+item2.tagName.toLowerCase());
   }
});

Here you write your condition :- $(item2).val() === '' && (item2.tagName.toLowerCase() !== 'label' || item2.tagName.toLowerCase() !== 'span')

First of all if you want to allow non-empty value element use !== instead of using === (as @Rory McCrossan suggest).

Now we talk about your second condition i.e. - (item2.tagName.toLowerCase() !== 'label' || item2.tagName.toLowerCase() !== 'span')

means here you allow if element is LABEL OR SPAN.

So, your condition goes into following four ways -

(false || true ) ====>  true  // Element is label

(true || false ) ====>  true // Element is span

(true || true ) ====>  true // Element is not a span and not a label

(false || false ) ====>  false // Element is a span and also an label [this condition never satisfied]

I think, here you are wrong. You should use following condition (if you don't allow both type of element)-

$(item2).val() === '' && (item2.tagName.toLowerCase() !== 'label' && item2.tagName.toLowerCase() !== 'span')

In short you must use &&/AND instead of using ||/OR.

Upvotes: 0

xdazz
xdazz

Reputation: 160963

Your condition is wrong, try below:

$('.container').children().each(function() {
    if ($(this).val() !== '' && !$(this).is('span') && !$(this).is('label')) {
        console.log("tag: "+item2.tagName.toLowerCase());
    }
});

But span and label doesn't has value attribute, if you mean to check whether the element has no children (including text nodes), there is :empty selector.

$('.container').children().each(function() {
    if (!$(this).is(':empty, span, label')) {
        console.log(this);
    }
});

Check the demo.

Upvotes: 2

adeneo
adeneo

Reputation: 318352

I would rewrite that to

$('.container').children().each(function (index, item2){
    if ( item2.value ) {

    }
});

A span or a label has no value, so those will fail the condition anyway

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337714

If you want to enter the condition if the value isn't empty you need to use !== instead of ===.

if ($(item2).val() !== '' && (item2.tagName.toLowerCase() !== 'label' || item2.tagName.toLowerCase() !== 'span')) {
    // your code...
}

Upvotes: 1

Related Questions