I'm trying to check an element for an empty attribute, but can't seem to get things to work.

Here's my html code:

    <div class="item">
        <div class="itemBtn" style="visibility:hidden;">
        </div>
        <div class="itemText" itemtype="loader">
        </div>
    </div>  
    <div class="item">
        <div class="itemBtn">
        </div>
        <div class="itemText" itemtype="">
        </div>
    </div>

Here's a jquery hover function that essentially just turns on the button. I was trying to build upon it by saying 'if theres no itemtype, dont turn it on'

    inner.find(".item").hover(function () {
        if (inner.find(".item-text[itemtype='']")) {
            $(this).children(".itemBtn").css("visibility", "hidden");
        } else {
            $(this).children(".itemBtn").css("visibility", "visible");
        }
     }, function () {
        $(this).children(".itemBtn").css("visibility", "hidden");
     });

UPDATE: I ended up solving this by doing the following:

    inner.find(".item").hover(function () {
         if ($(this).find("div[itemtype='']").length) {
           $(this).children(".itemBtn").css("visibility", "hidden");
         } else {
           $(this).children(".itemBtn").css("visibility", "visible");
         }
         }, function () {
           $(this).children(".itemBtn").css("visibility", "hidden");
         });

I'm trying to check an element for an empty attribute, but can't seem to get things to work.

Here's my html code:

    <div class="item">
        <div class="itemBtn" style="visibility:hidden;">
        </div>
        <div class="itemText" itemtype="loader">
        </div>
    </div>  
    <div class="item">
        <div class="itemBtn">
        </div>
        <div class="itemText" itemtype="">
        </div>
    </div>

Here's a jquery hover function that essentially just turns on the button. I was trying to build upon it by saying 'if theres no itemtype, dont turn it on'

    inner.find(".item").hover(function () {
        if (inner.find(".item-text[itemtype='']")) {
            $(this).children(".itemBtn").css("visibility", "hidden");
        } else {
            $(this).children(".itemBtn").css("visibility", "visible");
        }
     }, function () {
        $(this).children(".itemBtn").css("visibility", "hidden");
     });

UPDATE: I ended up solving this by doing the following:

    inner.find(".item").hover(function () {
         if ($(this).find("div[itemtype='']").length) {
           $(this).children(".itemBtn").css("visibility", "hidden");
         } else {
           $(this).children(".itemBtn").css("visibility", "visible");
         }
         }, function () {
           $(this).children(".itemBtn").css("visibility", "hidden");
         });

• javascript
• jquery
• attributes

• And? What happens when you run the code? – Bluefire Commented Jun 24, 2014 at 21:20
• You should use .attr() and conditionally check it. – Christopher Marshall Commented Jun 24, 2014 at 21:21

4 Answers 4

it's just simple example

var attr = $(this).attr('title');
if (typeof attr !== typeof undefined && attr !== false) {
    //do some thing
}

Use .attr like this with a conditional:

var attr = $(this).attr('title');
if (!attr) {
    // Do something
}

Or you can make it more concise by checking the attribute in the conditional like this:

if (!$(this).attr('title')) {
    // Do something
}

if (! $('.item-text').attr('itemtype') ) {
    alert("Nothing in itemtype");
} else {
    alert("Not empty");
}

Very simple, just check to see if the attribute exists or not using attr(), like so:

if (!$(this).attr('title')) {
    alert('Exists!');
}