Skip to main content
se añadieron 382 caracteres en el cuerpo
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

Puedes hacerlo asi:

// seleccionamos todos los li que esten dentro de un ul y hacemos un loop
for(el of document.querySelectorAll("ul li")){
     // le asignamos un evento click a cada 1
     el.addEventListener("click",(e) =>{
     // recibimos el evento y paramos su propagacion a otros elementos
     e.stopPropagation();
    // seleccionamos el evento clickeado lo dividimos hasta que empieze el siguiente ul obetenemos el primer elemento
 // y usamos la funcion trim() para eliminar los espacion
     console.log(e.target.innerHTML.split("<ul>")[0].trim());
   })
}
<ul id="ul_prueba">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3
    <ul>
      <li>Option 3.1
         <ul>
              <li>Option 3.1.1</li>
              <li>Option 3.1.2</li>
              <li>Option 3.1.3</li>
           </ul>
         </li>
      <li>Option 3.2</li>
      <li>Option 3.3</li>
    </ul>
  </li>
</ul>

Puedes hacerlo asi:

for(el of document.querySelectorAll("ul li")){
     el.addEventListener("click",(e) =>{
     e.stopPropagation();
     console.log(e.target.innerHTML.split("<ul>")[0].trim());
   })
}
<ul id="ul_prueba">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3
    <ul>
      <li>Option 3.1
         <ul>
              <li>Option 3.1.1</li>
              <li>Option 3.1.2</li>
              <li>Option 3.1.3</li>
           </ul>
         </li>
      <li>Option 3.2</li>
      <li>Option 3.3</li>
    </ul>
  </li>
</ul>

Puedes hacerlo asi:

// seleccionamos todos los li que esten dentro de un ul y hacemos un loop
for(el of document.querySelectorAll("ul li")){
     // le asignamos un evento click a cada 1
     el.addEventListener("click",(e) =>{
     // recibimos el evento y paramos su propagacion a otros elementos
     e.stopPropagation();
    // seleccionamos el evento clickeado lo dividimos hasta que empieze el siguiente ul obetenemos el primer elemento
 // y usamos la funcion trim() para eliminar los espacion
     console.log(e.target.innerHTML.split("<ul>")[0].trim());
   })
}
<ul id="ul_prueba">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3
    <ul>
      <li>Option 3.1
         <ul>
              <li>Option 3.1.1</li>
              <li>Option 3.1.2</li>
              <li>Option 3.1.3</li>
           </ul>
         </li>
      <li>Option 3.2</li>
      <li>Option 3.3</li>
    </ul>
  </li>
</ul>

se añadieron 32 caracteres en el cuerpo
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

Puedes hacerlo asi:

   for(el of document.querySelectorAll("ul li")){
      el.addEventListener("click",(e) =>{
     e.stopPropagation();
     console.log(e.target.innerHTML.split("<ul>")[0].trim());
   })
}
<ul id="ul_prueba">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3
    <ul>
      <li>Option 3.1
         <ul>
              <li>Option 3.1.1</li>
              <li>Option 3.1.2</li>
              <li>Option 3.1.3</li>
           </ul>
         </li>
      <li>Option 3.2</li>
      <li>Option 3.3</li>
    </ul>
  </li>
</ul>

Puedes hacerlo asi:

   for(el of document.querySelectorAll("ul li")){
      el.addEventListener("click",(e) =>{
      console.log(e.target.innerHTML.split("<ul>")[0].trim());
   })
}
<ul id="ul_prueba">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3
    <ul>
      <li>Option 3.1</li>
      <li>Option 3.2</li>
      <li>Option 3.3</li>
    </ul>
  </li>
</ul>

Puedes hacerlo asi:

for(el of document.querySelectorAll("ul li")){
     el.addEventListener("click",(e) =>{
     e.stopPropagation();
     console.log(e.target.innerHTML.split("<ul>")[0].trim());
   })
}
<ul id="ul_prueba">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3
    <ul>
      <li>Option 3.1
         <ul>
              <li>Option 3.1.1</li>
              <li>Option 3.1.2</li>
              <li>Option 3.1.3</li>
           </ul>
         </li>
      <li>Option 3.2</li>
      <li>Option 3.3</li>
    </ul>
  </li>
</ul>

Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

Puedes hacerlo asi:

   for(el of document.querySelectorAll("ul li")){
      el.addEventListener("click",(e) =>{
      console.log(e.target.innerHTML.split("<ul>")[0].trim());
   })
}
<ul id="ul_prueba">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3
    <ul>
      <li>Option 3.1</li>
      <li>Option 3.2</li>
      <li>Option 3.3</li>
    </ul>
  </li>
</ul>