如何使用 jquery 获取 span 中元素的同级文本？

Question

我需要在一段时间内更改文本。

<span class="count_bottom">
    <i class="blue">
        <i class="fa fa-sort-asc"></i>
        12% 
    </i> 
    From last seen
</span>

我只需要根据按钮点击事件改变From last seen文字即可。我该怎么做？

Answer 1

您可以 select span 中的第一个 i 元素，然后使用 nextSibling 属性获取它的下一个同级文本。

$("button").click(function(){
    $(".count_bottom > i")[0].nextSibling.nodeValue = "New value";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change text</button>
<span class="count_bottom">
    <i class="blue">
        <i class="fa fa-sort-asc"></i>
        12% 
    </i> 
    From last seen
</span>

Answer 2

过滤掉space中的非空文本节点，然后替换为新内容。

$('.count_bottom')
  // get all child nodes
  .contents()
  // filter out non-empty text node
  .filter(function() {
    // check node type and content
    return this.nodeType === 3 && this.nodeValue.trim().length;
    // replace it with new content  
  }).replaceWith('new text');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="count_bottom"><i class="blue"><i class="fa fa-sort-asc"></i>12% </i> From last seen</span>

纯JavaScript

// get the `i` tag inside `span`
document.querySelector('.count_bottom > i')
  // get adjacent text node which is immediately after the element
  .nextSibling
  // update text content of the text node
  .textContent = 'new text';

<span class="count_bottom"><i class="blue"><i class="fa fa-sort-asc"></i>12% </i> From last seen</span>

如何使用 jquery 获取 span 中元素的同级文本？

How to get sibling text of element in span using jquery?

html

javascript

jquery

text

siblings