CODEWITHSUNDEEP
jquerythisparent
Dylan Cross
Dylan Cross

Reputation: 5986

jQuery select this element, and the child class of this

What I want to do is something like this:

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

$(this.name).hide();

});

the structure would be:

<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>

so when you click on Name 2 it would hide that name class only. (my li element has more than 1 class inside, i want to be able to select which one I want) (This is not the actual reason I need to do this, but it's a simple example)

Upvotes: 0

Views: 266

Answers (3)

gen_Eric
gen_Eric

Reputation: 227310

I'm still not sure what you're asking, but it seems you have multiple <a>s inside an <li>, and want to the hide just the one that was clicked on.

Is this what you want?

$(".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.
});

EDIT: To only hide elements with a specific class, you can do this:

$(".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/

Upvotes: 1

Brandon Kindred
Brandon Kindred

Reputation: 1488

I am not very familiar with the .on() function. But I think what you are trying to do is the following. 

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

   $(this).hide();

});

Upvotes: 0

JaredPar
JaredPar

Reputation: 755317

To make this work you just need to build up a class selector based on the value of the attribute

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

Note: As Rocket pointed out if the anchor can have multiple classes then you need to consider whether or not to do the operation for all, some or just one of the classes. Here is the code to do it for all of the classes

$(".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();
  }
});

Upvotes: 0

Related Questions