à vol stationnaire append durée une fois

Question

ceci est mon html:

<ul> 
    <li>Milk</li> 
    <li>Bread</li> 
    <li class='fade'>Chips</li> 
    <li class='fade'>Socks</li> 
    </ul> 

ceci est ma fonction js: -

$("li").hover(
    function() { 
    $(this).append($("<span> ***</span>")); 
    }, 
    function() { 
    $(this).find("span:last").remove(); 
    } 
); 

je veux ce type de sortie: -

<ul> 
     <li>Milk</li> 
     <li>Bread</li> 
     <li class='fade'>Chips</li> 
     <li class='fade'>Socks</li> 
<span> ***</span> 
     </ul> 

ici, je suis d'essayer d'ajouter un span dans mouse hover sur li.
son travail parfait.
mais je veux ajouter une seule fois après la dernière li.
merci.

Answer 1

Utilisation one:

$("li").one("hover", function() { 
    $(this).append($("<span> ***</span>")); 
}); 

http://api.jquery.com/one/

Answer 2

Je trouve l'exemple sur le jQuery api manual, est-ce pas ce que vous voulez?

$("li").hover(
    function() { 
    $(this).append($("<span> ***</span>")); 
    }, 
    function() { 
    $(this).find("span:last").remove(); 
    } 
); 

Ou vous ne voulez pas supprimer la durée lorsque le congé de la souris, et je veux juste ajouter une travée:

$("li").hover(function() { 
    if ($(this).find('span').length == 0) { 
    $(this).append($("<span> ***</span>")); 
    } 
}); 

Answer 3

consultez d'abord si la durée existe déjà. Rappelez-vous que «hover» peut prendre deux fonctions si vous voulez supprimer la durée après le départ de la souris. C'est l'équivalent de mouseover et de mouseleave combinés.

$("li").hover(
    function() { 
    if ($(this).is(':empty')) { 
     $(this).append($("<span> ***</span>")); 
    } 
    }); 

Références: hover, empty, mouseover, mouseleave

Answer 4

JS Utilisez moderne!

const lis = document.getElementsByTagName("li"); 
let span; 
for (const li of lis) { 
    li.addEventListener("mouseover", function() { 
     // Do something cool 
     if (!span) { 
      span = document.createElement("span"); 
      span.innerText = " ***"; 
      li.parentElement.append(span); 
     } 
    }, {once : true}); // (optional) This will make it fire only once for each li 
         // You could add one "once" listener to just the ul as well 
} 

Documentation, CanIUse