jquery fonction de position pour li interne (imbriquée) renvoie zéro

J'ai imbriqué li, qui est pour le menu de sous-navigation horizontale. J'essaie d'obtenir la position de li de child li en utilisant la fonction position de jquery() mais elle retourne toujours zéro. La même fonction fonctionne pour le parent li.jquery fonction de position pour li interne (imbriquée) renvoie zéro

Html Code

<html> 
    <head> 
     <title>test</title> 
     <script type='text/javascript' src='js/jquery-1.4.2.js'></script> 
     <link rel="stylesheet" href="css/menu_style.css" type="text/css" /> 
     <script> 
      $(window).load(function() { 
       jQuery(document).ready(function() { 
        jQuery('.addchar').live('click', function(event) { 
         var position = $(this).position(); 
         alert(position.left); 
        }); 
       }); 
      }); 
     </script> 

    </head> 

    <body> 

     <div id="content"> 
      <div class="menu" id="menu"> 
       <ul> 
        <li><a href="#" class="addchar">A</a> 
         <ul> 
          <li><a href="#" class="addchar">Aword</a></li> 
         </ul> 
        </li> 
        <li><a href="#" class="addchar">B</a> 
         <ul> 
          <li><a href="#" class="addchar">Bword </a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html>

CSS CODE

.menu{ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    position:relative;/*should be relative*/ 
    font-size:16px; 
    font-weight:bold; 
} 
.menu ul{ 
    background:#333333; 
    height:40px; 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:900px; 
} 

.menu li{ 
    float:left; 
    padding:0px; 
    width:28px; 
    font-size:16px; 
} 
.menu li a{ 
    background:#333333 url("../img/seperator.gif") bottom right no-repeat; 
    color:#cccccc; 
    display:block; 
    font-weight:normal; 
    font-size:14px; 
    line-height:35px; 
    margin:0px; 
    padding:0px 12px; 
    text-align:center; 
    text-decoration:none; 
} 
.menu li a:hover, .menu ul li:hover a{ 
    background: #2580a2 url("../img/hover.gif") bottom center no-repeat; 
    color:#FFFFFF; 
    text-decoration:none; 
} 
.menu li ul{ 
    background:#333333; 
    display:none; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    position:absolute; 
    width:900px; 
    float:right; 
    z-index:200; 
} 
.menu li:hover ul{ 
    display:block; 

} 
.menu li li { 
    background:url('../img/sub_sep.gif') bottom left no-repeat; 
    display:block; 
    margin:0px; 
    padding:0px; 
    width:36px; 
} 
.menu li:hover li a{ 
    background:none; 

} 
.menu li ul a{ 
    display:block; 
    height:35px; 
    font-size:14px; 
    font-style:normal; 
    margin:0px; 
    padding:0px 10px 0px 15px; 
    text-align:left; 
} 
.menu li ul a:hover, .menu li ul li:hover a{ 
    background:#2580a2 url('../img/hover_sub.gif') center left no-repeat; 
    border:0px; 
    color:#ffffff; 
    text-decoration:none; 
}

Source

2011-02-01 kiranking

Vous voulez dire que la position en termes de pixels? .position() vous donne la position par rapport au parent parent. Comme chacun de vos liens de menu est le seul enfant du parent, la valeur de retour sera toujours nulle (si vous ne faites pas un positionnement de fantaisie).

Vous pourriez vouloir offset(), ce qui vous donne la position par rapport au document.

Si vous voulez obtenir l'indice de l'élément de menu dans l'ensemble de tous les éléments de menu, vous devez utiliser index():

$('#menu ul ul .addchar').index(this);

Source

2011-02-01 10:12:12

Bien qu'il y ait plusieurs enfants (en html non dénudée) I était juste en train de vérifier le premier enfant et maintenant, après que vous l'ayez mentionné, le premier enfant a renvoyé la valeur de position correctement. Merci – kiranking

jquery fonction de position pour li interne (imbriquée) renvoie zéro

Répondre

Questions connexes