Пробегать ранг элементов с jquery

Как осуществлять функцию, чтобы пробегать ранг элементов например начинаться с id p2 до id p7 и изменять текст каждого из элементов, что, который я пробежал, у меня нет ни более удаленной идеи, как делать это. если они могли давать мне идею или облегчать пример на самом деле он был бы благодарен за это

<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>
4
задан 09.05.2019, 10:09
3 ответа

Чтобы это делать ты можешь использовать ее funciГіn each() jQuery, таким образом что ты пробегаешь элементы внутри tag <ul>, или в travГ©s класса, который у этого tag есть:

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>
7
ответ дан 03.12.2019, 20:12

$(".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>
3
ответ дан 03.12.2019, 20:12
  • 1
    Я заношу в список, я это поместил в espa и # 241; ol – Sergio Rivas 26.09.2016, 05:02

Другие решения могут функционировать, но не являются динамическими, я создал бы функцию, где я смог манипулировать пределами ранга (согласно изложению), и где я смог распределять селектор также, такой формы, которая могла бы повторно использовать код.

Простой пример далее, который может быть улучшенным:

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>
2
ответ дан 03.12.2019, 20:12

Теги

Похожие вопросы