選擇同級div jQuery的跨度

Question

我正在使用jQuery選擇器，並且我需要能夠找到包含美元金額的每個范圍。 例如，我想查找並將第一個span更改為$ 15，將第三個span更改為$ 40。 我在示例中輸入了類名，但是在我的問題中，我不知道類名，也不知道第二元金額位於哪個跨度中。div或跨度也可能會有所不同。

這恰好是一種形式，我發現第一個美元金額是這樣的：

$("form[action='/cart'] span:contains('$'):first).replaceWith("$15");

我有以下HTML。

<div class="daddy">
  <div class="kid1">
    <span>$10</span>
  </div>
  <div class="kid2">
    <span>Nothing to see here</span>
  </div>
  <div class="kid3">
    <span>$20</span>
  </div>    
</div>

謝謝

Answer 1

您可以遍歷每個span元素，並檢查它的innerHTML包含$符號。 如果是這樣，則返回所有這些span s及其位置（ index ）。

一旦獲得它們的index位置，就可以根據需要對其進行修改。

注意 ：此解決方案不需要jQuery 。

示例 ：您可以將每個匹配span每個index推入數組。 在這種特定情況下，它看起來像var matchedIndexes = [0, 2] 。 然后基本上，如果您想更改例如第一個元素-只需使用matchedIndexes[0] 。

 var elems = document.getElementsByTagName('span'), matchedIndexes = []; Array.from(elems).forEach(function(v,i){ if (/\\$/.test(v.innerHTML)){ matchedIndexes.push(i); } }); //change html of the first element elems[matchedIndexes[0]].innerHTML = '$15'; //or change the last matched element elems[matchedIndexes[matchedIndexes.length-1]].innerHTML = '$99'; 

 <div class="daddy"> <div class="kid1"> <span>$10</span> </div> <div class="kid2"> <span>Nothing to see here</span> </div> <div class="kid3"> <span>$20</span> </div> </div> 

Answer 2

為什么不具有要更新值的數組並查詢包含'$'並進行相應更新？

 var ratesToUpdate = [15, 40, 70]; var spans = $("form[action='/cart'] span:contains('$')"); spans.each(function(index, span){ $(span).text('$'+ratesToUpdate[index]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form action="/cart"> <div class="daddy"> <div class="kid1"> <span>$10</span> </div> <div class="kid2"> <span>Nothing to see here</span> </div> <div class="kid3"> <span>$20</span> </div> <div class="kid4"> <span>nothing</span> </div> <div class="kid5"> <span>nothing</span> </div> <div class="kid5"> <span>$50</span> </div> </div> </form> 

Answer 3

這樣可以解決您的問題嗎？

var values = [15, 40];
$("form[action='/cart'] span:contains('$')").each(
    function(index, element)
    {
        element.value = '$'+ values[index];
    });

Answer 4

我喜歡Kind user給出的答案-但這是我的目標。 由於加法值不相似，我無法使其更具動態性（第一個加法5，第三個加倍...）

JSFiddle此處： https ：//jsfiddle.net/rL36jv8m/

您的HTML

<div class="daddy">
  <div class="kid1">
    <span>$10</span>
  </div>
  <div class="kid2">
    <span>Nothing to see here</span>
  </div>
  <div class="kid3">
    <span>$20</span>
  </div>    
</div>

對應div的附加值數組。

var addValues = [
    5,
  '',
  20
]

迭代：

$('.daddy').children().each(function(i, o) {
    var elem = $(o).find('span');
    if (elem.html().indexOf('$') === 0) {
    elem.html('$' + (parseInt(elem.html().replace('$', '')) + addValues[i]))
  }
})

希望這可以幫助。