使用Javascript动态更改DOM中的文本

Question

正在开发一个应用程序，其中的Javascript中包含一些数据我从后端拉出的对象。我正在尝试遍历Javascript对象并填充在ul内部的DOM中，但它不能正常工作，该ul有我想要的现有文本在循环后立即更改。

从浏览器控制台选项卡复制的Javascript对象

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

您可以在jQuery中使用.eq()方法...

.eq()

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之外，否则jQuery必须在$.each函数的每个单独调用中查找所有对象，然后获取$.each项。 ..

nth

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

---

[如果，如@scrappedcola在其评论中所建议，您希望它从第二项开始更新...这只是在

<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>

上执行+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);
});

Answer 2

尝试一下：

<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>

JSFiddle在这里-

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

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