选择同级div jQuery的跨度

Question

I am using jQuery selectors, and I need to be able to find each span individually that contains a dollar amount. For example, I'd like to find & change the first span to $15 and the third span to $40. I have put in class names in my example, but in my problem I do not know the class names, and I do not know which span the 2nd dollar amount is in. There also could be more or less div's and spans.

This happens to be in a form, and I find the first dollar amount like this:

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

I have the following 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>

Thanks

Answer 1

You can iterate over each span element and check if it's innerHTML contains $ symbol. If so, return all these span s and their position ( index ).

Once you have their index position, you can modify them as you like.

Note : No jQuery needed in this solution.

Example : You can push every index of each matched span to an array. In this particular case, it would look like var matchedIndexes = [0, 2] . Then basically, if you want to change eg the first element - simply use 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

why not having an array with values to be updated and query the span which contains '$' and update accordingly?

 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

Would this solve your problem?

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

Answer 4

I like the answer Kind user gave - but here is my stab at it. I couldn't make it more dynamic as the addition values are not similar (first one is added by 5, third is doubled...)

JSFiddle Here: https://jsfiddle.net/rL36jv8m/

Your 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>

Array of addition values to corresponding divs.

var addValues = [
    5,
  '',
  20
]

Iteration:

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

Hope this helps.