CODEWITHSUNDEEP
javascriptjquery
Jack Php
Jack Php

Reputation: 577

at hover append span one time

this is my html:

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

this is my js function:-

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

i want to this type of output:-

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

here i am try to append one span in mouse hover on li.
its work perfect.
but i want to append only one time after last li.
thanks.

Upvotes: 6

Views: 1866

Answers (4)

Gibolt
Gibolt

Reputation: 47177

Use modern JS!

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

Upvotes: 0

David Gilbertson
David Gilbertson

Reputation: 4873

Simply check first if the span already exists. Remember that 'hover' can take two functions if you want to remove the span after the mouse leaves. This is the equivalent to mouseover and mouseleave combined.

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

References: hover, empty, mouseover, mouseleave

Upvotes: 0

Darren
Darren

Reputation: 70748

Use one:

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

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

Upvotes: 2

xdazz
xdazz

Reputation: 160883

I found the example on the jQuery api manual, isn't this what you want?

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

Or you don't want to remove the span when mouse leave, and just want to append one span:

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

Upvotes: 3

Related Questions