Question

simple jquery code to show paragraph only when hovering the LI

<ol id="sortme">
<li>this content <p class="edit">first hidden content</p></li>
<li>this content <p class="edit">second hidden content</p></li>
<li>this content <p class="edit">third hidden content</p></li>
</ol>

Jquery

$(".edit").hide;
$('#sortme li').hover(
                function () {
                  $(".edit").show();
                },
                function () {
                  $(".edit").hide();
                 }
              );

my problem is when hovering any of li all paragraph’s appear
i need to do it one by on one
so when hovering the first li “first hidden content” appear
and when hovering the second li “first hidden content” disappear and “second hidden content”

and so on for the rest of list

Answer 1

You can search in this context by supplying it as second parameter into $():

$(".edit").hide;
$('#sortme li').hover(
    function () {
        $(".edit", this).show();
    },
    function () {
         $(".edit", this).hide();
    }
);