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>

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

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>