使用 Javascript 動態更改 DOM 中的文本

Question

我正在開發一個應用程序，我在 Javascript object 中有一些數據，我從后端提取了這些數據。 我正在嘗試遍歷 Javascript object 並填充到 ul 內的 DOM 中，但它不起作用，ul 有現有的文本，我想在循環后立即更改。

Javascript object 從瀏覽器控制台選項卡復制

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()方法...

 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 object，並相應地設置文本值。

---

對上述內容的一個小改進是在$.each之外獲取對象，否則 jQuery 必須在$.each function 的每個單獨調用中找到所有對象，然后獲取第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 在他們的評論中所建議的那樣，您希望它從第二項開始更新......這只是在.eq(key)上執行+1的一種情況......

 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>

Answer 2

嘗試這個：

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/