Obtener posicion

chicohot20 · #1 (**permalink**) 15/10/2010, 17:28

En el sgte. código tengo una lista con 3 Items, si hago click en el segundo Item, como puedo saber que hice click en el 2do li?

Código HTML:

Ver original$("li").click(function(){
   //Este li en que posicion esta?
});
 
<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

Panino5001 · #2 (**permalink**) 15/10/2010, 18:20

Sin Framework sería así (quizá te sirva de guía):

Código PHP:

  <!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<script type="text/javascript">

function $(x){return document.getElementById(x);}

function addEvent(obj,fun,type){ 

    if(obj.addEventListener){ 

        obj.addEventListener(type,fun,false); 

    }else if(obj.attachEvent){ 

        var f=function(){ 

            fun.call(obj,window.event); 

        } 

        obj.attachEvent('on'+type,f); 

        obj[fun.toString()+type]=f; 

    }else{ 

        obj['on'+type]=fun; 

    } 

}  

onload=function(){

    var li=document.getElementsByTagName('li');

    for(var i=0,l=li.length;i<l;i++){

        addEvent(li[i],function(){

            var p=this,c=0;

            while(p && p.nodeName.toLowerCase()!='ul'){

                if(p.nodeName.toLowerCase()=='li'){

                    c++;    

                }

                p=p.previousSibling;

            }

            alert(c);

        },'click');

    }

}

 
</script>

 
</head>

 
<body>

<ul>

 <li>Item 1</li>

 <li>Item 2</li>

 <li>Item 3</li>

</ul>

 
</body>

</html>

chicohot20 · #3 (**permalink**) 15/10/2010, 20:03

Gracias por la solucion, funciona bien, pero tambien hice mi propia solución en Jquery, pongo el codigo para los que quieran.

Código Javascript:

Ver original$("li").click(function(){
        var current = $(this);
        var abort = false;
        var i=0;
        while (!abort) {
            if (current.prev().length!=0){      
                i++;
                current=current.prev();
            }
            else abort = true;
        }
        alert(i)
        return false;
    });
<ul> 
 <li>Item 1</li> 
 <li>Item 2</li> 
 <li>Item 3</li> 
</ul>

Dany_s · #4 (**permalink**) 16/10/2010, 12:28

jQuery tiene un método para obtener el índice de elementos, fijate la doc http://api.jquery.com/index/

las posiciones comienzan con 0

Código HTML:

Ver original<html>
<head>
    <title>Pruebas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
    $("li").click(function(){
        alert ( $(this).index() );
    });
});
</script>
 
</head>
<body>
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
</body>
</html>

chicohot20 · #5 (**permalink**) 16/10/2010, 14:00

No me funciona el codigo Dany_s me devuelve -1 porque?

chicohot20 · #6 (**permalink**) 16/10/2010, 14:05

El error es mío, la versión de Jquery debe ser 1.4, debo actualizarme no sabía.

Gracias Dany_s,