Как получить текст элемента в span с помощью jquery?

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

Фильтр из непустых текстовые узлы внутри пространства, а затем заменить новым содержанием.

$('.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>

Answer 2

Вы можете выбрать первый элемент i в span и использовать свойство 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>