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,