Question

我正在使用jQuery选择器，我需要能够单独找到包含一美元金额的每个跨度。例如，我想找到＆amp;将第一个span更改为15美元，将第三个$("form[action='/cart'] span:contains('$'):first).replaceWith("$15");更改为40美元。我在我的例子中输入了类名，但在我的问题中，我不知道类名，我不知道第二美元金额在哪个范围内。也可能有更多或更少的div和跨度。

这恰好是一种形式，我发现这样的第一笔金额：

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

我有以下HTML。

select  'ABCD 123'                  as str
       ,regexp_substr(str,'[^ ]*$') as token
;       

+----------+-------+
|   str    | token |
+----------+-------+
| ABCD 123 |   123 |
+----------+-------+

由于

Answer 1

您可以迭代每个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 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

这会解决您的问题吗？

@message.param_to_pass = param_to_pass

Answer 4

我喜欢Kind user给出的答案 - 但这是我对它的抨击。由于添加值不相似（第一个加5，第三个加倍......），我无法使其更具动态性。

JSFiddle Here：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]))
  }
})

希望这有帮助。

选择兄弟div jquery的跨度

4 个答案: