时间戳

首页 > 解决方案 > 使用 Javascript 动态更改 DOM 中的文本

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

问题描述

我正在开发一个应用程序，我在从后端提取的 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>

标签： javascriptobjectdom

解决方案

您可以.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 在他们的评论中所建议的那样，您希望它从第二项开始更新......这只是+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>

推荐阅读