jQuery поиск children после одиночных тегов

77
11 января 2018, 21:12

Простой пример, если попадаются одиночные блоки вроде hr, то последующие элементы не находит. jQuery 3.2.1

<p>Some text <hr> some <b>text</b>!!!!</p>
console.log($('div').children().length) // = 0

UPD: поправил по просьбам

Answer 1

Дело в том, что <p> — это такой особенный тег, который не требует обязательного явного закрытия и который может неявно закрываться одним из следующих тегов (список взял из MDN):

<address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> или ещё один <p>

Таким образом, структура вида:

<p>Что-то<hr>что-то ещё</p>

парсится в такой вид:

<p>Что-то</p>
<hr/>
что-то ещё
<p></p>

Кстати, из-за того, что последний </p> по сути закрывает ранее не открытый тег, код является невалидным, а браузеры в конце добавляют пустой <p></p>, пытаясь таким образом исправить ошибку.

Если вы хотите получать все эти внутренности, можно, к примеру, обернуть всё это дело в <div>, который никогда неявно не закрывается (данный код является валидным):

console.log( 
    document.querySelector('div').children.length 
); 
 
// И для наглядности посмотрим, как браузер распарсил html-код: 
console.log(document.querySelector('div').outerHTML);
<div> 
   <p>Some text <hr> some <b>text</b>!!!! 
</div>

Если же вам принципиально завернуть всё в <p>, то придётся писать код вроде <p>Some text</p><hr><p>some <b>text</b>!!!!</p>

READ ALSO
эффект поглощения [требует правки]

эффект поглощения [требует правки]

Как реализовать эффект? Я скроллю в низ и header уезжает в низ, а content на него наезжает!!!

45
Формирование списков с помощью jQuery

Формирование списков с помощью jQuery

Добрый деньСтолкнулся с проблемой в лабораторной работе, никак не могу реализовать часть задания:

74
input для числового ввода

input для числового ввода

Есть код для числового ввода в inputРаботает хорошо, но проблема в том, что буквы вообще не воспринимаются, и перестают работать горячие клавиши,...

61
как в Piwik (Matomo) вставить свой html?

как в Piwik (Matomo) вставить свой html?

Требуется на странице статистики (Piwik) добавить свою панель меню (или сверху или снизу страницы)Свои файлы Piwik не дает изменять

78