如何在同一個html的多個實例中編輯字符串？

我有下面這段代碼，不同的數據，重複了10次的網頁上我的工作：如何在同一個html的多個實例中編輯字符串？

HTML：

<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.strong p（311）的數量根據div.kpaGraph p中的數字（43％）以相同的方式跨越此代碼的所有實例，並使用Javascript/jQuery。什麼是最乾淨的方式來做到這一點？我應該選擇所有$('div.kpaGraph p')，然後使用each()或者我應該創建一個函數並在所有這些函數上運行它？

謝謝！

來源

2013-02-21 dezman

你應該選擇所有'$（'div.kpaGraph p'）'，然後使用'each（）'並傳遞'each'匿名）函數使其工作。 – 2013-02-21 16:54:01

因此，當'kpaGraph'目標值被改變時，下面'kpaBottom'中的值應該改變，但只有在'kpaGraph'下面的值纔會改變？或者當它改變了全部10個變化呢？ – Cymen 2013-02-21 16:58:21

只適用於它下面的一個，每個實例。 – dezman 2013-02-21 17:01:05

您可以使用下面的方法找到連詞適當的元素與.each()上$('div.kpaGraph p')：

$(this).parent().next('div.kpaBottom').find('div.strong p')

例如，使用下面就帶在kpaGraph P個節點的值，並將它添加到p節點中的以下kpaBottom節點：

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

jsFiddle example

來源

2013-02-21 17:02:47 j08691

有幾種方法。

您可以使用「下一步」。

$('.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>

然後使用jQuery，你可以像這樣選擇它：

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

來源

2013-02-21 17:03:37 UpHelix

像這樣的東西可能是很乾淨太：

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

這將文字改爲Target: 43%在你的榜樣。

來源

2013-02-21 17:10:03 david

如何在同一個html的多個實例中編輯字符串？

回答

相關問題