JQuery - получить только родительский элемент текста без детей

Question

у меня есть веб-страницу, я выскабливание, и текст Я ищу находится внутри span, который содержит другой span

<div class="someParentDiv"> 
    <span>this is the text I want 
    <span class="childSpanClass">I don't want this text</span> 
    </span> 
</div> 

Я пытаюсь получить текст, который я хочу, с помощью jQuery, но когда я получу текст elemnt с text(), я получу также текст детского промежутка, который я не хочу.

мне удалось получить только текст, я хочу с

$('div.someParentDiv span').remove('.childSpanClass') 

, но это кажется немного назад ко мне (see example), и мне интересно, если есть лучше, лучше способ сделать это. Любые идеи?

Answer 1

Вы можете отфильтровать все, что не простой текст, обернув все contents:

var node = $('.someParentDiv > span').contents().filter(function() { 
    return this.nodeType == 3; // text node 
}); 

alert(node.text()); 

Answer 2

Без JQuery: выбрать textContent первого дочернего элемента span в div.someParentDiv. Первым ребенком является TEXT_NODE (см. MDN) этого диапазона, который является (не видимым) отдельным узлом. С JQuery использовать $('.someParentDiv span').contents().first('[nodeType=3]').text();

var res = document.querySelector('#result'); 
 

 
// no jquery 
 
res.innerHTML = 'DOM: ' + 
 
       document.querySelector('.someParentDiv span').firstChild.textContent; 
 

 
// jquery 
 

 
res.innerHTML += '<br>JQuery: ' + 
 
       $('.someParentDiv span').contents().first('[nodeType=3]').text();

#result { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="someParentDiv"> 
 
    <span>this is the text I want 
 
    <span class="childSpanClass">I don't want this text</span> 
 
    </span> 
 
</div> 
 

 
<div id="result"></div>

Answer 3

Аналогичная проблема:

jQuery get .text() but not the text in span

NodeType объяснил

http://code.stephenmorley.org/javascript/dom-nodetype-constants/