Есть ли инструмент, который поможет мне понять обход DOM в jQuery?

Question

Я думаю, что у меня есть базовое понимание обхода DOM, но я сомневаюсь, что я делаю это эффективно.

Например:

<textarea name="description"></textarea>
<p class="notes"><small>100 characters or less <span class="remainder"></span></small></p>

У меня есть прослушиватель событий keyup в текстовой области.Я хочу, чтобы диапазон .remainder отображал что-то вроде "(осталось 50 символов)", когда пользователь вводит текстовую область.

В настоящее время я получаю доступ к диапазону .remainder следующим образом:

var remainder = $('textarea').next('p').children('small').children('.remainder');

Я предполагаю, что есть более простой способ сделать это - может быть, с помощью селекторов?Я надеюсь найти какой-нибудь инструмент, такой как Инструменты разработчика WebKit, который наглядно покажет мне, как один элемент связан с другим.

Может кто-нибудь сказать мне, существует ли такая вещь?Любой совет, который вы можете дать в отношении обхода DOM, также будет высоко оценен.

Спасибо!

Answer 1

Вы можете попробовать использовать Firebug для Firefox .Этот плагин дает вам доступ к DOM, и вы можете выполнить код прямо в консоли и сразу увидеть эффект.

Например, после установки Firebug откройте его и выберите вкладку консоли.Затем в правом окне введите свой код Javascript, включая селекторы jQuery и т. Д., И нажмите «Выполнить».

Answer 2

Я бы рекомендовал вам изучить CSS-селекторы немного больше. Как вы можете видеть из других комментариев, есть и другие способы быстрее добраться до этого элемента. Как правило, CSS-селекторы работают быстрее, чем вызовы функций JS, поэтому старайтесь свести к минимуму вызовы, если в этом нет необходимости.

Что касается инструмента, о котором вы спрашивали, правила Firebug, как уже упоминалось. У вас есть встроенная консоль, где вы можете вызывать функции с текущей веб-страницы, поэтому нет необходимости нажимать кнопку «Обновить» после каждого теста. Он также отображает все данные, которые вам нужны в хорошем, всеобъемлющем виде. Кроме того, при построении ваших запросов CSS вы можете использовать вкладку HTML, чтобы изучить структуру документа и решить, какие селекторы использовать.

Chrome также имеет консоль разработчика, выполняющую ту же роль, и он также существует Firebug Lite, и для этого не требуется специальный браузер (он написан только на JS).

Answer 3

Firebug для Firefox - очень удобный инструмент. Также я предлагаю вам использовать Инструменты разработчика, которые входят в Chrome. Вы можете видеть ресурсы на странице, писать сценарии и тестировать их на лету.

Answer 4

Если есть только один элемент с классом remainder, вы можете сделать:

var remainder = $(".remainder")

... чтобы выбрать его. Если их больше, вам придется сузить область поиска. И Firebug - это то, что я тоже рекомендую.

Answer 5

Более простой способ сделать это - использовать .find() вместо .children().

$('textarea').next('p').find('.remainder')