내부 (중첩 된) li에 대한 jquery 위치 함수는 0을 반환합니다.

가로형 서브 메뉴에 사용되는 중첩 된 li이 있습니다. jquery의 position() 함수를 사용하여 child li의 위치를 얻으려고 시도하지만 항상 0을 반환합니다. 부모 li에 대해 동일한 함수가 작동합니다.내부 (중첩 된) li에 대한 jquery 위치 함수는 0을 반환합니다.

html로 코드

<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 코드

.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; 
}

출처

2011-02-01 kiranking

당신은 픽셀의 측면에서 위치를 의미? .position()은 오프셋 부모 인에 상대적인 의 위치를 제공합니다. 각 메뉴 링크가 부모의 유일한 자식이므로 반환 값은 항상 0입니다 (멋진 위치 지정을하지 않으면).

을 입력하면 문서와 관련된 위치를 알 수 있습니다. 모든 메뉴 항목의 설정에있는 메뉴 항목의 인덱스을 얻고 싶은 경우에

는, 당신은 index() 사용할 필요 : (비 제거 HTML에) 여러 자녀가 있었지만

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

출처

2011-02-01 10:12:12

를 I 첫 번째 자녀를 확인하는 중이었고 지금은 첫 번째 자녀가 위치 값을 제대로 반환하지 않은 것을 언급 한 후입니다. 감사 – kiranking

내부 (중첩 된) li에 대한 jquery 위치 함수는 0을 반환합니다.

답변

관련 문제