Clever Geek Handbook

How do I get the <li> value of a jQuery hover function?

My html content looks like this:

<ul>
    <li class=folder>Main
      <ul>
         <li class=folder>1st fldr
            <ul>
                   <li> child1
                   <li> child2
            </ul
      </ul>

</ul>

Now I want to get the value folders

(main, 1st fldr) as my cursor overlay method is as follows,

$('ul li.folder').hover(function () {
       alert($(this).text());
});

but I am not getting the meaning, can anyone help me on this.

+3


source to share


4 answers


You need to select the text node from the hovering element:

$('ul li.folder').hover(function () {
 alert($(this).contents().filter(function() {
   return this.nodeType === 3; //get text nodes
  }).text());
});


Working demo

+2


source 


    <ul>
        <li class=folder><span>Main</span>
        <ul>
            <li class=folder><span>1st fldr</span>
            <ul>
                <li> child1</li>
                <li> child2</li>
            </ul>
        </ul>

    </ul>


    $('ul li.folder span').mouseover(function () {
        alert($(this).text());
    });


http://jsfiddle.net/15v26hko/

+1


source


use 

<ul>
    <li class=folder>Main
      <ul>
         <li class=folder><span>1st fldr</span>
            <ul>
                   <li> child1
                   <li> child2
            </ul
      </ul>

</ul>

and a folder access value like

$('ul li.folder').hover(function () {
       alert($(this).find('span').text());
});
0


source


clone

root element, then find it children

and remove

. The only thing that will remain is the current item. Try with

$('ul li.folder').mouseenter(function () {
   var text = $(this).clone().children().remove().end().text();
   alert(text);
});

Demo

0


source






More articles:


All Articles