Nueva pregunta

Pregunta:

Fecha: 16-12-2015 04:19:27 (En Español)

Capturar tercer etiqueta li con Javascript y CSS[Resuelta]

Ayuda , espero me puedan ayudar

Como haria que cuando haga click en mi boton me atrape el tercer li que en mi caso seria tercero

esto es mi codigo

<html>
<head>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script type="text/javascript">
    function captura(){
    	
    }
 </script>
</head>
<body>
	 <ul id="pestana">
            <li>Inicio</li>
            <li>Segundo</li>
            <li>Tercero</li>
            <li>Cuarto</li>
	 </ul>
<input type="button" name="" value="capturar" onclick="capturar()">
</body>
</html>
Etiquetas: CSS - HTML - Javascript - JQuery - Pregunta Votos: 3 - Respuestas: 10 - Vistas: 10 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 16-12-2015 05:06:04 Hola,
    No entiendo tu pregunta si puedes explicar un poco mejor la idea estaría mejor par poder entender tu idea.
    Salu2
      Votos: -1 - Link respuesta
     
  • Fecha: 16-12-2015 05:27:57 Hola Joaquin, estoy de acuerdo con lo que comenta Edinson, no se entiende tu pregunta y principalmente por la carencia de un buen título.

    Tu título anterior erá: "Ayuda , espero me puedan ayudar" <-- que claramente no dice cual es tu problema/pregunta

    Yo lo ajuste a lo que considero que estas necestando: "Capturar tercer etiqueta li con Javascript y CSS"

    y aquí la solución al caso:

    <html>
        <head>
            <meta charset="utf-8">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script type="text/javascript">
                function capturar() {
                    alert(document.querySelector('li:nth-child(3n)').innerHTML);
                }
            </script>
    
            <style type="text/css">
                ul li:nth-child(3n){
                    color:red;
                }
            </style>
        </head>
        <body>
            <ul id="pestana">
                <li>Inicio</li>
                <li>Segundo</li>
                <li>Tercero</li>
                <li>Cuarto</li>
            </ul>
            <input type="button" name="" value="capturar" onclick="capturar()">
        </body>
    </html>
    


    Nota1: ojo que en tu ejemplo por un lado definis la función "captura()" y cuando la invocas llamas a "capturar()" (te va a terminar indicando que la función no esta definida/no existe).

    Nota2: seleccioné el elemento desde CSS y le cambié el color, y también capturé el elemento desde Javascript puro y presento su contenido con un alert(), si lo queres hacer por medio de JQuery tan solo cambias el "document.querySelector" por "$" y "innerHTML" por "text()".

    Saludos,

    PD: Edinson, creo que como la pregunta quedo ajustada podrías quitarle el voto negativo, no? (eso queda a tu criterio, solo es una sugerencia).
      Votos: 3 - Link respuesta
     
  • Fecha: 16-12-2015 05:50:06 Efectivamente de acuerdo con fernando al decir

    Nota1: ojo que en tu ejemplo por un lado definis la función "captura()" y cuando la invocas llamas a "capturar()" (te va a terminar indicando que la función no esta definida/no existe).


    y eso se ve claramente aqui expongo tu codigo

    <input type="button" name="" value="capturar" onclick="capturar()">
    



    y tu funcion js esta asi

     <script type="text/javascript">
        function captura(){  
        }
     </script>
    


    siguiendo bajo el concepto de fernando de que tu pregunta es Como atrapar el tercer li

    expongo solucion mostrandote tres alternativa de como capturar el tercer li

    
    function capturar() {
    	
    var opcion1 = $("#pestana li:eq(2)").text();
    var opcion2 = $("#pestana").find("li:eq(2)").text();
    var opcion3 = $("#pestana").children("li:eq(2)").text();	
    
    alert(opcion1);
    alert(opcion2);
    alert(opcion3);
     
     }
    
    


    saludos
      Votos: 3 - Link respuesta
     
  • Fecha: 16-12-2015 05:54:49 PD: Edinson, creo que como la pregunta quedo ajustada podrías quitarle el voto negativo, no? (eso queda a tu criterio, solo es una sugerencia).

    No se porque el motivo de voto negativo de edison , como vera soy nuevo en esta comunidad y aun no se como hacer buenas preguntas que cumpla con los requisitos , veo innecesario la actitud de edinson de votar en negativo es mi opinion

    edison(-1)
      Votos: 2 - Link respuesta
     
  • Fecha: 16-12-2015 06:05:07 Otra forma podria ser con el selector exclusivo de jQuery nth-child(x).

     <!DOCTYPE HTML>
     <html>
     <head>
         <meta charset="utf-8">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script>
          function capturar()
          {
             alert($('#pestana > :nth-child(3)').text());  
          }
      </script>
     </head>
     <body>
          <ul id="pestana">
                 <li>Inicio</li>
                 <li>Segundo</li>
                 <li>Tercero</li>
                 <li>Cuarto</li>
          </ul>
     <input type="button" id="boton1" value="capturar" onclick="capturar()">
     </body>
     </html>


    Disculpen si algo no esta bien ya que recien estoy empezando con Jquery.

    ¡Saludos!
      Votos: 3 - Link respuesta
     
  • Fecha: 16-12-2015 06:05:47 Gracias fernando y juan por la solucion doy resuelta a la pregunta
    saludos a ambos


    PD : de ambos funciona su codigo , pero cuando aumente en mi pagina otros ul con sus respectivo li , el codigo de fernando no funciono :) asi que opte por lo de juan
      Votos: 2 - Link respuesta
     
  • Fecha: 16-12-2015 06:57:05 Hola,
    El voto negativo lo he dado al no entender tu pregunta.
    Esto se dan cuando no cuerda la pregunta, no se entiende o simplemente no esta bn redactada para la comprensión y se opta para una corrección de dicha pregunta para mejor entendimiento.
    Ya que se ha sido solucionada y entendida la pregunta ya ha pasado a voto positivo(+1).
    Salu2
      Votos: 2 - Link respuesta
     
  • Fecha: 16-12-2015 08:00:01 Edinson, voto lo que decís (+1) pero no estoy del todo de acuerdo, antes de votar negativo yo prefiero interactuar un poco, preguntar y ver por que.... luego si no hay respuesta o la calidad sigue siendo mala le doy mi voto negativo.

    Hasta la fecha no he tenido necesidad de usarlo, mira que vos más de una vez te los merecías (igual ya nos hemos olvidado de tus oscuras épocas, no? jajaja)

    Saludos a todos y que no se vuelva algo personal, no desviemos el camino, aquí nos congregamos por la tecnología :)

    PD: Joaquin, pone una foto o algo en tu perfil, es un poco aburrido interactura con un avatar por default...
      Votos: 1 - Link respuesta
     
  • Fecha: 16-12-2015 09:24:27 Edinson si bien estoy de acuerdo contigo (+1) te sugiero que le quites el voto negativo ya que es nuevo en la comunidad y aun no sabe como formular la pregunta, algo que ira haciendo bien indicandole como se realizan ;)
    Como ha dicho Fernando en tu época nebulosa tambien te habrías ganados muchos negativos de mi parte y sin embargo no te he dado negativos y aposte que harías las cosas como corresponden y ahora sos una persona que aporta valor a la comunidad

    Joaquin: en las preguntas hay que ser lo mas explicito posible y con el codigo utilizado, y toda información que pueda ayudar a entender la problemática y brindarte la mejor respuesta posible y no andar dando respuestas a ciegas.
    Seguro que iras realizando preguntas mas completas ;)

    Saludos
      Votos: 3 - Link respuesta
     
  • Fecha: 16-12-2015 09:37:30 Gracias por tu observacion walter , poco a poco aprendere ha realizar buenas preguntas :) , como mencione soy nuevo en esta comunidad y creo yo que poco a poco han aprendido a plantear preguntas , saludos   Votos: 2 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com