Просмотр выбора JQuery

Question

Можно ли увидеть, какие элементы / элементы я выбрал в конкретном наборе jquery?

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

Я сейчас использую оповещение ($ ('div'). Length); чтобы увидеть, что я выбрал, что не , что полезно.

Answer 1

Некоторое время назад я написал для этой цели плагин jquery. Он использует консоль журнала Firebug для регистрации выбора jquery. (если вы не используете firebug для своей веб-разработки, вы действительно должны учитывать это)

(function($){

function logThis()
{
    console.debug(this);
}

jQuery.fn.debug = function(msg)
{
    console.group(msg || "no message");
    this.each(logThis);
    console.groupEnd();
    return this;
};
})(jQuery);

чтобы использовать его, просто вызовите debug для выбора jquery с необязательным сообщением

$(".example").debug("nodes found")

Answer 2

Все, что вам нужно, это Firebug и эта строка в вашем коде:

console.log(<<myJQuerySelection>>);

например:

console.log($('div'));

Наведите указатель мыши на результаты, и они будут выделены на странице.

Answer 3

Если это чисто для отладки, вы можете войти в консоль javascript:

$('div').each(function() {
    console.log($(this).id);
})

Примечание: я настоятельно рекомендую использовать firebug , если вы его еще не используете.

Answer 4

Это все хорошие примеры, я тоже создаю границы вокруг элементов.

$('div').css({border: '1px solid red'});

После этого вы можете легко увидеть в браузере то, что было выбрано (если только некоторые элементы не скрыты из области просмотра). Это также удобно, когда Firebug не установлен / не включен.

Вероятно, следует использовать CSS-свойство 'outline', чтобы оно не расширяло элементы на 2 пикселя.