Zeige nur eine Instanz einer Klasse mit jQuery

Question

Ich habe gegoogelt und so gesucht, aber ohne Erfolg (wahrscheinlich schlechte Suchfähigkeiten).

Mein Problem ist wahrscheinlich ziemlich einfach, ich möchte einfach das Mouseover-Ereignis zeigen nur die enthaltenen div (.action), wenn das Listenelement mit der Maus über (ui-state-default).

Hier ist das Markup

<ul id="column-2" class="connectedSortable"> 
    <li class="ui-state-default">feature 
     <div class="action"> 
      <img src="delete.png" class="delete" alt="Delete this Story"> 
      <br /> 
      <img src="duplicate.png" class="delete" alt="Duplicate this Story"> 
     </div> 
    </li> 
    <li class="ui-state-default">forward 
     <div class="action"> 
      <img src="delete.png" class="delete" alt="Delete this Story"> 
      <br /> 
      <img src="duplicate.png" class="delete" alt="Duplicate this Story"> 
     </div> 
    </li> 
</ul> 

Und das JavaScript

$(function() { 
    $(".ui-state-default").mouseenter(function(){ 
     $(".action").show(); 
    }).mouseleave(function(){ 
     $(".action").hide(); 
     }); 
}); 

Jetzt erkenne ich, dass dies jedes Vorkommen von .Action zeigen wird - aber wie kann ich sicherstellen, dass es zeigt es nur innerhalb es ist Elternteil li? Ich habe versucht, die jQuery Eltern/Kind-Argumente zu verwenden, aber kläglich gescheitert.

Jede Hilfe würde sehr geschätzt werden.

Answer 1

$(function() { 
    $(".ui-state-default).mouseenter(function() { 
    $(this).find(".action").show(); 
    }).mouseleave(function() { 
    $(this).find(".action").hide(); 
    }); 
}); 

Oder benutzen Sie einfach den Hover() Ereignis:

$(function() { 
    $(".ui-state-default").hover(function() { 
    $(this).find(".action").show(); 
    }, function() { 
    $(this).find(".action").hide(); 
    }); 
}); 

Statt:

$(this).find(".action") 

können Sie auch tun:

$(this).children(".action") 

oder eine beliebige Anzahl anderer Möglichkeiten, es auszuwählen.

Answer 2

Sie sollten ".Action" den aktuellen Kontext (die Liste Artikel, den Sie schweben) einschränken:

$(function(){ 
    $(".ui-state-default").hover(
    var listItem = this; 
    function(){ 
     $(".action", listItem).show();   
    } 
    , 
    function(){ 
     $(".action", listItem).hide();   
    } 
); 
});