Используйте jQuery для применения стилей ко всем экземплярам элемента, по которому щелкнули

Question

Я стремлюсь к тому, чтобы jQuery посмотрел на элемент, на который я только что нажал (например, тег ap или li), а затем применил стилизацию ко всем экземплярам этого элемента (поэтому все теги p настр.).

Пока это мой код, но он применяет стилизацию только к одному элементу, на который щелкнули.

$("article *", document.body).click(function (e) {
  e.stopPropagation();
selectedElement = $(this);
$(selectedElement).css("border", "1px dotted #333")
});

Буду признателен за любую помощь или совет!

Answer 1

$('article *',document.body).click(
function(e){
    e.stopPropagation();
    var selectedElement = this.tagName;
    $(selectedElement).css('border','1px dotted #333');
}
);

Демонстрация на JS Bin , хотя я использовал универсальный селектор (так как я опубликовал только несколько списков (один ol другой ul).

Выше код, отредактированный в ответ на комментарии @Peter Ajtai, и связанная демоверсия JS Bin, обновленная, чтобы отразить изменение:

Зачем бегать вокруг блока один раз, прежде чем посмотреть на tagName? Как насчет var selectedElement = this.tagName ;. Также это e.stopPropagation (), поскольку вы вызываете метод.

Answer 2

Я не знаю, сколько элементов вложено в ваши article элементы, но было бы неоправданно добавлять обработчики событий клика к всем из них, используя *.

Вместо этого просто добавьте обработчик к article и получите tagName из e.target, по которому щелкнули.

$("article", document.body).click(function ( e ) {
    e.stopPropagation();
    $( e.target.tagName ).css("border", "1px dotted #333")
});

Это будет много более эффективный.