CODEWITHSUNDEEP
jquerydom
Kyle
Kyle

Reputation: 1183

Find closest element with class name

I have a list of unique items with the same class name, .word.

<ol>
  <!-- a -->
  <li class="word">
    <p>Aloof</p>
    <p>Definition here...</p> 
    <button class="delete-word">Delete</button>     
  </li>

  <!-- b -->
  <li class="word">
    <p>Fallacy</p>
    <p>Definition here...</p> 
    <button class="delete-word">Delete</button>     
  </li>

  <!-- c -->
  <li class="word">
    <p>Disdain</p>
    <p>Definition here...</p> 
    <button class="delete-word">Delete</button>     
  </li>
</ol>

I'm using jQuery to display the delete button on mouseover of an element. I'm looking for a way to only display the (closest) button of the hovered li element.

I've tried using jQuery's closest() method but unsuccessful. 

$(document).on("mouseover", ".word", function() {
  // show
  $(".delete-word").show();

  // hide
  $(".word").mouseout(function () {
      $(".delete-word").hide();
  });
});

I have a JSBin uploaded, here.

Upvotes: 1

Views: 1649

Answers (4)

Derek
Derek

Reputation: 3435

You are not looking for the closest, you are looking for a child. Use the children method.

$(this).children(".delete-word").show();

Alternatively, if you wish to select from all descendants of .word, you can use the find method.

$(this).find(".delete-word").show();

Note: For a CSS only solution, refer to Robert McKee's answer.

Upvotes: 5

Robert McKee
Robert McKee

Reputation: 21487

There is no reason to be using jQuery (or javascript) for that. Use CSS:

.delete-word { display:none; }
.word:hover .delete-word {display: block;}
<ol>
  <!-- a -->
  <li class="word">
    <p>Aloof</p>
    <p>Definition here...</p> 
    <button class="delete-word">Delete</button>     
  </li>

  <!-- b -->
  <li class="word">
    <p>Fallacy</p>
    <p>Definition here...</p> 
    <button class="delete-word">Delete</button>     
  </li>

  <!-- c -->
  <li class="word">
    <p>Disdain</p>
    <p>Definition here...</p> 
    <button class="delete-word">Delete</button>     
  </li>
</ol>

Since it looks like you are generating a list of terms and definitions, you should probably consider replacing your ol tag with dl, remove your li tags (or change to div), change the first p tag with dt and the second p tag with dd as this is exactly what these tags are for.

Upvotes: 4

DinoMyte
DinoMyte

Reputation: 8868

The correct implementation :

$('.word').on("mouseover",function() {
  $(this).find(".delete-word").show();
  }).on("mouseout",function() {
       $(this).find(".delete-word").hide();
  });

http://jsfiddle.net/1fe1sanv/2/

Upvotes: 0

VinceBrown
VinceBrown

Reputation: 95

Looks like you are on the right path of thinking, I have ran into this problem a couple times in the last month and asked the same question on here so glad I can finally help someone out with it.

You are looking for the child element no the closest element so you will want to utilize '.children()' but also will need $(this) so you are only grabbing the child of the .word you are hovering over and not all of the .word classes

Jquery

$('.word').hover(function() {
    // show
    $(this).children(".delete-word").show();
  }, function(){
    // callback on mouse out - hide
    $(this).children('.delete-word').hide();
  });

Upvotes: 1

Related Questions