Есть ли инструмент, который поможет мне понять обход 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 for Firefox. Этот плагин дает вам доступ к DOM, и вы можете выполнить код прямо в консоли и сразу увидеть эффект.

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

Answer 2

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

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

Answer 3

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

var remainder = $(".remainder") 

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

Answer 4

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

Answer 5

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

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

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