Checking is visible returns false every time

Question

I am having issues determining if a particular dom object is visible or not. I have the following code outputting to the console and it always returns false even though I can see the element on the screen.

console.log(itemElement.innerText +" is visible: " + $(itemElement.id).is(':visible'));

The context that I am testing is to see whether a list item in a jQuery Accordion object is visible or not. I am iterating through all the list elements (including sub list elements) and performing this check. Always the check returns false. I have googled everywhere for an answer but couldn't find one.

Here is the html to show what the layout looks like. I have edited it a bit to keep it reasonable but you should get a good idea of how it is set up.

<div id="collection_form">
  <div id="element_container">
    <ul class="element_list element_group ui-sortable">
       <li id="de_1" class="element_group_parent eg-collapsed element_group_leaf">
          stuff in here is same as below
       </li>
       <li id="de_29" class="element_group_parent eg-collapsed element_group_leaf">
         <div>
           <span>Room Booking</span>
           <span class="element_type"> - Group</span>
           <span class="remove_element">remove</span>
           <div style="clear:both"></div>
         </div>
         <ul class="element_group">
           <li id="de_30" class="element_config_form element_group_leaf">
              <div>
                <span>Room Number</span>
                <span class="element_type"> - Text</span>
                <span class="remove_element">remove</span>
                <div style="clear:both"></div>
              </div>
           </li>
         </ul>
      </li>
      <li id="de_31" class="element_group_parent eg-collapsed element_group_leaf">
        <div></div>
        <ul class="element_group">
          <li id="de_32" class="element_config_form element_group_leaf">
              <div> more stuff </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

What is it that I am doing wrong?

Answer 1

Try this :

 $(itemElement).is(':visible');  // this works if itemElement is a DOM element, or even if itemElement is a jQuery wrapped DOM elemenent

i suspect your itemElement.id is undefined

But if itemElement.id is correctly defined (as the id of your itemElement, in this case means that itemElement is a DOM element) you can do both these :

$("#"+itemElement.id).is(':visible');

or even better :

$(itemElement).is(':visible');