считать дочерний элемент и текст с ним jquery

Question

Я хочу посчитать общий элемент и текст внутри тега p

<p class="parent">
  <span class="child">Span Text</span> 
  Text Text Text
</p>

это возможно?

$(p).children(').length

Я использую этот код, и это дает мне только 1 но я хочу считать 2.

Answer 1

Вы ищете дочерние узлы, а не дочерние (подробнее о разнице здесь ).

Однако обратите внимание, что фактическое количество дочерних узлов в вашем коде HTML будет 3, так как есть текстовый узел, который содержит пробелы перед интервалом.

В этом примере вы можете увидеть количество дочерних узлов с пробелом или без пробела перед интервалом.

const parent1ChildNodes = document.querySelector('.parent1').childNodes.length
const parent2ChildNodes = document.querySelector('.parent2').childNodes.length

console.log(parent1ChildNodes)
console.log(parent2ChildNodes)

<p class="parent1">
  <span class="child">Span Text</span> 
  Text Text Text
</p>

<p class="parent2"><span class="child">Span Text</span> 
  Text Text Text
</p>

Answer 2

Вам нужно использовать содержимое вместо children для подсчета текстовых узлов. Обратите внимание, что contents также будет учитывать узлы комментариев.

$(p).contents().length

Answer 3

метод children возвращает только допустимые объекты. «Текст Текст Текст» не является html объектом. Поэтому это не считается. Если вы поместите его в другой промежуток, длина потомков станет 2.

<p class="parent">
  <span class="child">Span Text</span> 
  <span>Text Text Text</span>
</p>