Как выбрать идентификатор и дочерний тег с помощью Jquery?

Question

Я пытаюсь выбрать ul с атрибутом id.У него есть теги li, а внутри тегов li есть теги привязки.Когда я мышью, я хочу, чтобы ul и все элементы в нем были скрыты.

$('#switch-fighters-results-list').mouseout(function(){
  $(this).hide();
});

вот разметка

<div style="display: block;" id="switch-fighters-results" class="ajax-search-results">
        <ul id="switch-fighters-results-list" class="ajax-search-results-list clrFx">
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/ferrozzo/56">Scott Ferrozzo</a>
            </li>
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/bessac/63">Scott Bessac</a>
            </li>
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/adams/191">Scott Adams</a>
            </li>
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/junk/362">Scott Junk</a>
            </li>
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/smith/376">Scott Smith</a>
            </li>
            <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class="">
                <a href="/fighter/scott/baker/555">Scott Baker</a>
            </li>
        </ul>
        <div id="switch-fighter-more-results">
            <a id="switch-fighter-more-results-link">13 more found for <span class="input-string">'scott'</span> »</a>
        </div>
    </div>

Answer 1

как выбрать идентификатор и дочерний тег с Jquery?

Вы бы использовали это:

$('#switch-fighters-results-list li').mouseleave(function(){
  $(this).hide();
});

Где "li" - дочерний селектор. Обратите внимание на пробел:)

Однако мышеловка, вероятно, не будет делать то, что вы ожидаете.

mouseover и mouseout срабатывают каждый раз, когда курсор мыши наводится над другим элементом, или больше не имеют прямой «прямой видимости» с элементом, для которого он срабатывает. mouseenter и mouseleave, с другой стороны, срабатывают всякий раз, когда мышь покидает ограничивающую рамку элемента. Попробуйте использовать mouseleave вместо mouseout.

проверить это:

http://jsfiddle.net/FVPxP/3/

Самый простой способ скрыть весь ul - это:

Это решение напрямую решает проблему, с которой вы столкнулись, и скрывает UL при выходе из его ограничительной рамки.

<ul id="switch-fighters-results-list">
    <li><a href="lego.com">Lego.com</a></li>
    <li><a href="lego.com">Lego.com</a></li>
    <li><a href="lego.com">Lego.com</a></li>
    <li><a href="lego.com">Lego.com</a></li>
    <li><a href="lego.com">Lego.com</a></li>
</ul>

$('#switch-fighters-results-list').mouseleave(function(){
  $(this).hide();
});

Кроме того, вам не нужно будет снова показывать всех детей li при входе в ul, так что это самый прямой подход.

Answer 2

Я не знаю, имеет ли это значение, но я думал, что подход проппера будет:

$('#switch-fighters-results-list ul').mouseout(function(){  $(this).hide();});

Answer 3

Из приведенной информации я бы сказал добавить "li" в селектор, если "switch-fighters-results-list" является идентификатором ul:

$('#switch-fighters-results-list li').mouseout(function(){
  $(this).hide();
});

Надеюсь, это поможет.

Answer 4

Вы пробовали использовать hover вместо этого?Я смог использовать hover, где mouseout не работал

Fiddle Link

$('#switch-fighters-results-list').hover(function(){},function(){
    $('#switch-fighters-results-list').hide();
});

Answer 5

$("#ul[id=id]").find("li").each(function(){
   $(this).mouseout(//do something);
});