Jquery 里面如何获得当前DOM对象是其父的第几个子？

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>当点击一个LI的时候，怎么知道这个是第二个还是第三个子？
要求：不要给每个LI加上“id=1”之类的东西。最好可以用Jquery里面的方法来实现。

解决方案 »

  1.   

    使用index方法$(document).ready(function(){
    $("ul>li").click(function(){
    var $allLi=$("ul>li");

    //console.log($allLi.index($(this))+1);
    alert($allLi.index($(this))+1);
    });
    });
      

  2.   

    数一数本节点上面还有多少兄弟节点就行了。
    <ul>
      <li onclick='getP(this)'>a </li>
      <li onclick='getP(this)'>b </li>
      <li onclick='getP(this)'>c </li>
      <li onclick='getP(this)'>d </li>
      <li onclick='getP(this)'>e </li>
    </ul> 
    <script type='text/javascript'>
    var getP = function(o){
    var i = 0;
    while(o = o.previousSibling ){
    if(o.nodeName!='#text') i++;
    }
    alert(i);
    }
    </script>
      

  3.   

    juery实现:$(document).ready(function(){
        $("ul>li").click(function(){
            alert($("ul>li").index(this));
        });
    });
      

  4.   

    看看juery的API 
    index( Element subject ) returns Number
    Searches every matched element for the object and returns the index of the element, if found, starting with zero.
    Returns -1 if the object wasn't found.Example:
    On click, returns the index (based zero) of that div in the page.
     
        $("div").click(function () { 
          // this is the dom element clicked 
          var index = $("div").index(this); 
          $("span").text("That was div index #" + index); 
        }); 
     HTML:
    <span>Click a div!</span> 
      <div>First div</div> 
      <div>Second div</div> 
     
      <div>Third div</div>
      

  5.   

    用jQuery 可以这样实现的
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function() { $("ul li").click(function() { alert("你点击的是第" + $("ul li").index($(this)) + "个"); alert($(this).html()) }); })</script>
    </head>
    <body>
    <ul>
      <li>a </li>
      <li>b </li>
      <li>c </li>
    </ul> 
    </body>
    </html>
      

  6.   

    $(this).next()
    判断当前点的是哪个节点
      

  7.   

    多谢各位指教。原来我一直不知道有index这个方法。
      

  8.   

    <div class="main">
    <div class="mainChild">1</div>
    <div class="mainChild">2</div>
    <div class="mainChild">3</div>
    <div class="mainChild">4</div>
    <div class="mainChild">5</div></div>
    $(function() {
        $(".mainChild").click(function() {
            var dd = $(".mainChild").index($(this));
            
            setbg(dd);
        });
    });