Динамическое изменение текста в DOM с использованием Javascript

Question

Я работаю над приложением, в котором у меня есть некоторые данные в объекте Javascript, которые я извлек из бэкэнда. Я пытаюсь перебрать объект Javascript и заполнить его в DOM внутри ul, но он не работает, в ul есть существующий текст, который я хочу изменить сразу после цикла.

Объект Javascript скопирован из консоли браузераtab

0: "Mathematics"
​
1: "English"
​
2: "Swahili"
​
3: "Germany"

Логика

$.each(planDetails, function (key, value) { 
    $("#packageBenefits ul li" + key).text(value);
});

Разметка для заполнения данных в

<div class="card">
    <div class="card-header">All subjects</div>
    <div class="card-body" id="packageBenefits">
        <ul>
            <li><span> Mathematics </span> </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum .............. </li>
        </ul>
    </div>
</div>

Answer 1

Попробуйте:

var planDetails = { 
  0: "Mathematics",
  1: "English",
  2: "Swahili",
  3: "Germany"
}

$('.card-body li').each(function(index) {
    $(this).html(planDetails[index]);
});

JSFiddle здесь - https://jsfiddle.net/j67L4tk9/1/

Answer 2

Вы можете использовать метод .eq() в jQuery ...

var planDetails = ["Mathematics","English","Swahili","Germany"];
$.each(planDetails, function (key, value) { 
  $("#packageBenefits ul li").eq(key).text(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
    <div class="card-header">All subjects</div>
    <div class="card-body" id="packageBenefits">
        <ul>
            <li><span> Mathematics </span> </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum .............. </li>
        </ul>
    </div>
</div>

Это позволит получить объект nth и соответственно установить текстовое значение.

---

Небольшое улучшение по сравнению с вышеупомянутымполучить объекты один раз за пределами $.each, в противном случае jQuery должен найти все объекты при каждом отдельном вызове функции $.each, а затем получить элемент nth ...

var planDetails = ["Mathematics","English","Swahili","Germany"];
var $lis = $("#packageBenefits ul li");
$.each(planDetails, function (key, value) { 
  $lis.eq(key).text(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
    <div class="card-header">All subjects</div>
    <div class="card-body" id="packageBenefits">
        <ul>
            <li><span> Mathematics </span> </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum .............. </li>
        </ul>
    </div>
</div>

---

Если, как подсказывает @scrappedcola в своем комментарии, вы хотите, чтобы оно начало обновляться со 2-го элемента ... это просто случай выполнения+1 на .eq(key) ...

var planDetails = ["Mathematics","English","Swahili","Germany"];
var $lis = $("#packageBenefits ul li");
$.each(planDetails, function (key, value) { 
  $lis.eq(key+1).text(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
    <div class="card-header">All subjects</div>
    <div class="card-body" id="packageBenefits">
        <ul>
            <li><span> Mathematics </span> </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum ............... </li>
            <li>lorem ipsum .............. </li>
        </ul>
    </div>
</div>