【问题标题】:jquery .next can't find siblingjquery .next 找不到兄弟
【发布时间】:2016-02-07 00:29:10
【问题描述】:

我似乎无法获得一个前置跨度来在其父 li 中找到它的 ul 同级...不管它们是否不是同一个标签,它不应该找到它吗?

这是前置,在 css 中它浮动到列表项内容的右侧,但这不应该影响它吧?

$('aside ul > li').prepend('<span class="icon-arrow-right"></span');

这里的点击功能似乎没有正确产生警报:

$('aside .icon-arrow-right').click(function(){
        if($(this).next('ul').hasClass('sub-nav')) {
            alert('yes');
        } else {
            alert('no');
        }
    });

此函数的当前结果将始终弹出“否”,无论列表项是否具有具有类 sub-nav 的子 UL。

编辑:这是html,请注意js添加了span,它不是原生的:

<ul>
<li><span class="icon-arrow-right"></span><a href="#">Accommodations</a>
    <ul class="sub-nav">
        <li><span class="icon-arrow-right"></span><a href="">Inland View Rooms</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Partial Ocean View Rooms</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Harbor View Rooms</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Ocean View Rooms</a></li>
        <li><span class="icon-arrow-right"></span><a href="">ADA Accessible Guestroom</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Executive Suites</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Spa Terrace Suite</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Cannery Row Suite</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Grand Bay Suite</a></li>
        <li><span class="icon-arrow-right"></span><a href="">Presidential Suite</a></li>
    </ul>
</li>
<li><span class="icon-arrow-right"></span><a href="#">Hotel</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Destination</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Dining</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Spa</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Meetings &amp; Events</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Weddings</a></li>
<li><span class="icon-arrow-right"></span><a href="#">Packages</a></li>
<li class="book-header"><span class="icon-arrow-right"></span><a href="#">Book Now</a></li>

【问题讨论】:

  • 执行prepend之前的HTML是什么样的?
  • 你能创建一个Stack Snippet 来演示这个问题吗?
  • 我已经添加了UL列表的html。

标签: javascript jquery next


【解决方案1】:

.next() 方法只返回元素的直接下一个兄弟元素,如果它与提供的选择器不匹配,则不返回任何内容。

在您的情况下,.next() 元素不是&lt;ul&gt;,而是&lt;a&gt; 元素。

要查找第一个匹配的兄弟,请使用.nextAll('ul').first()

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-11-09
    • 2013-01-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多