JQuery выберите этот элемент, и дочерний класс этого

Question

Что я хочу сделать, это примерно так:

$(".chat-wrapper").on("click", ".chat-wrapper li", function(){

$(this.name).hide();

});

структура будет:

<ul class="chat-wrapper">
<li><img src=""/><a class="name">Name 1</a><div class="body"></div></li>
<li><img src=""/><a class="name">Name 2</a><div class="body"></div></li>
</ul>

, поэтому, когда вы нажимаете на Имя 2, оно скрывает только этот класс имен. (мой элемент li имеет более 1 класса внутри, я хочу иметь возможность выбрать тот, который я хочу) (Это не настоящая причина, по которой мне нужно это делать, но это простой пример)

Answer 1

Я все еще не уверен, что вы спрашиваете, но, похоже, у вас есть несколько <a> внутри <li>, и вы хотите скрыть только тот, на который нажали.

Это то, что вы хотите?

$(".chat-wrapper").on("click", ".chat-wrapper li", function(e){
    $(e.target).hide(); // `e.target` is the child element (<a>) you clicked on.
                        // `this` would be the entire <li>, because that's
                        // what the event is bound to.
});

РЕДАКТИРОВАТЬ: Чтобы скрыть элементы только с определенным классом, вы можете сделать это:

$(".chat-wrapper").on("click", ".chat-wrapper li", function(){
    $('.name', this).hide(); // This is the same as $(this).find('.name')
                             // `this` is the <li> that was clicked on
});

DEMO: http://jsfiddle.net/LTPpJ/

Answer 2

Я не очень знаком с функцией .on (). Но я думаю, что вы пытаетесь сделать следующее.

$(".chat-wrapper > li").on("click", function(){

   $(this).hide();

});

Answer 3

Чтобы сделать эту работу, вам просто нужно создать селектор класса на основе значения атрибута

$(".chat-wrapper").on("click", ".chat-wrapper li", function(){
  var sel = "." + $(this).attr('class');
  $(sel).hide();
});

Примечание. Как отметил Ракет, если якорь может иметь несколько классов, вам необходимо учитыватьделать или нет операцию для всех, некоторых или только одного из классов.Вот код, чтобы сделать это для всех классов

$(".chat-wrapper").on("click", ".chat-wrapper li", function(){
  var all = $(this).attr('class').split(' ');
  var i;
  for (i = 0; i < all.length; i++) {
    var sel = '.' + all[i];
    $(sel).hide();
  }
});