javascript - 使用Jquery在相同类型的元素中选择元素

Question

我有一个这样的嵌套html结构：

<ul class="root">
    <li>Foo 1 <label class="bar-class">bar</label>
         <ul>
            <li>Foo 2 <label class="bar-class">bar</label>

            </li>

            <li>Foo 3 <label class="bar-class">bar</label>

            </li>
        </ul>
    </li>
</ul>

依此类推，它是一个站点地图，因此嵌套的深度可以随心所欲。

我正在尝试显示和bar label隐藏li element.

使用这样的代码：

 $('.root li').live({
                mouseenter:
                       function () {
                           $(this).find('>.bar-class').show('slow');
                       },
                mouseleave:
                       function () {
                           $(this).find('>.bar-class').hide('fast');
                       }
            });

问题是，当前的每个li父级也显示它bar，我如何选择它以便只选择当前项目的栏？

我已经尝试了变化，但还没有破解它。

谢谢。

编辑 1：固定 html 标签。

Answer 1

您可以false从回调函数返回以停止事件在 DOM 树上的进一步传播。

并更改为使用mouseoverand mouseout：

$('.bar-class').hide();

$('.root li').live({
  mouseover:
    function () { $(this).find('>.bar-class').show('slow'); return false; },
  mouseout:
    function () { $(this).find('>.bar-class').hide('fast'); return false; }
});​

在这一点上，我想鼓励您从 using 转换live为 using on()，因为live已弃用。

在这种情况下，代码变为：

$('.root').on('mouseover mouseout', 'li', function () {
  $(this).children('.bar-class').stop(true, true).fadeToggle('slow');
  return false;
});​

感谢Yoshi参考：http : //jsfiddle.net/6FzWU/2/

Answer 2

使用e.preventDefault()，也.live被弃用，使用.on

$(document).on({
  mouseenter: function (e) {
    e.preventDefault();
    $(this).children('.bar-class').show('slow');
  },

  mouseleave: function (e) {
    e.preventDefault();
    $(this).children('.bar-class').hide('fast');
  }
}, '.root li');