Go through a range of jquery elements

Navigation
3

How to go through a range of elements, for example starting from id p2 to id p7 and modifying the text of each of the elements that I visited, I do not have the remotest idea of how to do that. If you could give me an idea or provide an example of truth I would appreciate it 

<ul class="caja">
        <li id="p1">Parte 1</li>
        <li id="p2">Parte 2</li>
        <li id="p3">Parte 3</li>
        <li id="p4">Parte 4</li>
        <li id="p5">Parte 5</li>
        <li id="p6">Parte 6</li>
        <li id="p7">Parte 7</li>
        <li id="p8">Parte 8</li>
    </ul>
    
asked by jsoe jose 25.09.2016 в 16:58
source

3 answers

3

To do this you can use the function each() of jquery in such a way that you go through the elements within the <ul> tag or through the class that this tag has: 

var element = $('.caja li').length; //obtienes el total de elementos dentro del tag ul con clase caja
$( ".caja li" ).each(function( index ) {
  if(index > 0 && index < element-1){ //condicion para excluir el primer y el ultimo elemento de la lista
    $( this ).html(index+" otro"); //cambias el texto dentro de los elementos li
    //console.log( index + ": " + $( this ).text() );
  }
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Each</title>
</head>
<body>
<ul class="caja">
        <li id="p1">Parte 1</li>
        <li id="p2">Parte 2</li>
        <li id="p3">Parte 3</li>
        <li id="p4">Parte 4</li>
        <li id="p5">Parte 5</li>
        <li id="p6">Parte 6</li>
        <li id="p7">Parte 7</li>
        <li id="p8">Parte 8</li>
    </ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
    
answered by 25.09.2016 / 19:17
source
3

$(".caja li").each(function(index){
    if (index > 0 ){ // ignorando el primer elemento cuando index es igual 0
        var element = $(this); // <-- en la variable element tienes tu elemento
        console.log(element.text());
    }
});
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<ul class="caja">
  <li id="p1">Parte 1</li>
  <li id="p2">Parte 2</li>
  <li id="p3">Parte 3</li>
  <li id="p4">Parte 4</li>
  <li id="p5">Parte 5</li>
  <li id="p6">Parte 6</li>
  <li id="p7">Parte 7</li>
  <li id="p8">Parte 8</li>
</ul>
    
answered by 25.09.2016 в 17:56
2

The other solutions can work, but they are not dynamic, I would create a function where you can handle the limits of the range (according to the statement) and where you can assign the selector too, so that you can reuse the code.

The simple example is below, which can be improved: 

function modificarRango(selector, inicio = 1, final) {
  for (var i = inicio; i <= final; i++) {
   $(selector + ":nth-child(" + i + ")").html('Mi nuevo texto');
  }
}
modificarRango(".caja li", 2, 7);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Each</title>
</head>
<body>
<ul class="caja">
        <li id="p1">Parte 1</li>
        <li id="p2">Parte 2</li>
        <li id="p3">Parte 3</li>
        <li id="p4">Parte 4</li>
        <li id="p5">Parte 5</li>
        <li id="p6">Parte 6</li>
        <li id="p7">Parte 7</li>
        <li id="p8">Parte 8</li>
    </ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
    
answered by 25.09.2016 в 21:46
Is it possible to differentiate selectors with only $ (this)? Add two conditions C?