Javascript 如何跨同一html的多个实例编辑字符串？

下面的代码包含不同的数据，在我正在处理的页面上重复了10多次：

HTML:

目标：43%

311

受训教师人数

我想基于

div.kpaGraph p

（43%）中的数字，在使用Javascript/jQuery的所有代码实例中以相同的方式更改

div.strong p

（311）中的数字。最干净的方法是什么？我应该选择所有

$（'div.kpaGraph p'）

，然后使用

each（）

，还是应该创建一个函数并在所有函数上运行它

---

谢谢

您可以使用以下内容来查找与

$（'div.kpaGraph p'）

上的

.each（）

关联的适当元素：

例如，使用以下命令将获取kpaGraph p节点中的值，并将其附加到以下KPABOTOM节点中的p节点：

$('div.kpaGraph p').each(function () {
    $(this).parent().next('div.kpaBottom').find('div.strong p').html('foo');
});

有几种方法

你可以用“下一步”

或者你必须以某种方式在他们之间建立一种关系，这样你就知道他们是一起的，就像一个共同的父母一样

<div class="kpaWr">
    <div class="kpaGraph">
        <p>Target: 43%</p>
        <div class="progress">
            <div class="bar"></div>
        </div>
    </div>
    <div class="kpaBottom">
        <div class="strong">
            <p>311</p>
        </div>
        <div class="weak">
            <p>number of teachers trained</p>
        </div>
    </div>
</div>

---

像这样的东西可能也很干净：

$("div.strong p").text(function(index, text){
    return $(this).closest("div.kpaBottom").prev("div.kpaGraph").find("p").text();
});

---

在您的示例中，这会将文本更改为

Target:43%

。

您应该选择所有

$（'div.kpaGraph p'）

，然后使用

each（）

并传递

每个
匿名）函数使其工作。因此，当
kpaGraph
目标值更改时，下面
kpaBottom
中的值应该更改，但仅对
kpaGraph
正下方的值更改？或者当它被更改时，所有10个也会更改？仅针对其正下方的一个，针对每个实例。
$('.kpaGraph').each(function(){
   var $kpaStrong = $(this).next('.kpaBottom .strong p');//this is the elm that has 311
});

<div class="kpaWr">
    <div class="kpaGraph">
        <p>Target: 43%</p>
        <div class="progress">
            <div class="bar"></div>
        </div>
    </div>
    <div class="kpaBottom">
        <div class="strong">
            <p>311</p>
        </div>
        <div class="weak">
            <p>number of teachers trained</p>
        </div>
    </div>
</div>

$('.kpaGraph').each(function(){
   var $kpaStrong = $(this).closest('.kpaWr').find('.kpaBottom .strong p');//this is the elm that has 311
});

$("div.strong p").text(function(index, text){
    return $(this).closest("div.kpaBottom").prev("div.kpaGraph").find("p").text();
});