兄弟div jqueryのスパンを選択

Question

私はjQueryセレクタを使用していますが、私は個々のスパンを個別に見つけるには金額が必要です。たとえば、&が最初のspanを$ 15に、第3のspanを$ 40に変更したいとします。私は私の例でクラス名を入れましたが、私の問題ではクラス名は分からず、2ドル目の金額がどれくらいあるのか分かりません。

これは、フォームであることを起こる、と私はこのような最初のドル金額を見つける：私は、次のHTMLを持って

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

を。

<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

なぜ更新する値の配列を持たず、'$'を含むスパンをクエリし、それに応じて更新しますか？

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 2

あなたは各span要素を反復処理し、それがinnerHTMLが$記号が含まれているのですかどうかを確認することができます。その場合は、spanとその位置（index）をすべて返します。

位置がindexになったら、好きなように変更できます。

注：この解決策には、jQueryが必要です。

例：一致した各indexのすべてを配列にプッシュできます。spanこの特定のケースでは、それは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 3

これはあなたの問題を解決しますか？

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

Answer 4

私は答えがKind userが好きですが、ここに私のスタブです。私はここで

JSFiddle（...最初のものは3分の1が倍増され、5で追加された）ほかの値が類似していないとして、それはよりダイナミックにすることができませんでした：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])) 
    } 
}) 

は、この情報がお役に立てば幸いです。