Question

I need to access div class using label class. The Logic is on placing mouse over <label class="name"> <div class="hidden"> is called. Please note <li> and <div> id is unqiue all the time

HTML

     <li id="132" class="main" ><label class="name">Ajay</label>   
    <div class="hidden" id="132" >
       <p>Some Msg!!<p>
    </div>
    </li>

    <li id="192"  class="main"> <label class="name">Raj</label>    
    <div class="hidden" id="192" >
       <p>Some Msg!!<p>
    </div>
    </li>

    <li id="231"  class="main" ><label class="name">David</label>    
    <div class="hidden" id="231" >
       <p>Some Msg!!<p>
    </div>
    </li>

   So on...

Jquery

    $('.name').hovercard({detailsHTML:$('.hidden').html()}) 
// on placing mouse on label <div class="hidden"> is called

Please help me out

Answer 1

Your markup is invalid, and your description doesn’t match what your code says you’re trying to do. I’m guessing here that the markup in each case should look like this:

<li id="132" class="main"><label class="name">Ajay</label>
<div class="hidden" id="132" >
   <p>Some Msg!!<p>
</div>
</li>

If so, and if you’re trying to call hovercard on label.name elements and include information from the div.hidden near them, you’d want something like this:

 $(".name").each(function() {
    var $this = $(this);
    $this.hovercard({detailsHTML:$this.nextAll("div.hidden").html()});
 });

…because the div and the label are not in a parent/child relationship, they’re siblings. You can’t do this without the loop because we need to navigate.

---

Also note that using the same id value on both the label and the div is invalid. id values must be unique on the page. Also note that id values starting with digits are valid in HTML5, but they’re invalid in HTML4 and earlier, and they’re invalid in CSS. As you’re using jQuery, that means you probably use a lot of CSS selectors to interact with your structure. Since all-numeric id values are invalid in CSS, they’re invalid in CSS selectors, and you’ll just end up causing yourself trouble.