jQuery 遍历 - 如何获取正确的元素

Question

这是我的 html 代码。由于很多原因，这无法改变：

<ul class="menu">
<li>About Us
    <div class="menuHover">
        <ul class="left">
            <li class="item"><a href="#" title="Link">Link</a>
                <span class="m-desc">
                    <img src="../home.png" width="65" height="60" />
                    <p>This is a description: One</p>
                </span>
            </li>
            <li class="item"><a href="#" title="Link">Link</a>
                <span class="m-desc">
                    <img src="../home.png" width="65" height="60" />
                    <p>This is a description: Two</p>
                </span>
            </li>
            <li class="item"><a href="#" title="Link">Link</a>
                <span class="m-desc">
                    <img src="../home.png" width="65" height="60" />
                    <p>This is a description: Three</p>
                </span>
            </li>
            <li class="item"><a href="#" title="Link">Link</a>
                <span class="m-desc">
                    <img src="../home.png" width="65" height="60" />
                    <p>This is a description: Four</p>
                </span>
            </li>
        </ul>
                    <img src="images/dottedline.png" width="3" height="120" />
                        <div class="right">
                            <img src="images/home.png" width="65" height="60" />
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing consectetur adipi Lorem ipsum dolor sit amet, consectetur</p>
            </div>
    </div>
</li>                   
<li>Contact
    <div class="menuHover">
        <ul class="left">
            <li class="item"><a href="#" title="Link">Link</a>
                <span class="m-desc">
                    <img src="../home.png" width="65" height="60" />
                    <p>This is a description: One</p>
                </span>
            </li>
            <li class="item"><a href="#" title="Link">Link</a>
                <span class="m-desc">
                    <img src="../home.png" width="65" height="60" />
                    <p>This is a description: Two</p>
                </span>
            </li>
            <li class="item"><a href="#" title="Link">Link</a>
                <span class="m-desc">
                    <img src="../home.png" width="65" height="60" />
                    <p>This is a description: Three</p>
                </span>
            </li>
            <li class="item"><a href="#" title="Link">Link</a>
                <span class="m-desc">
                    <img src="../home.png" width="65" height="60" />
                    <p>This is a description: Four</p>
                </span>
            </li>
        </ul>
                    <img src="images/dottedline.png" width="3" height="120" />
                        <div class="right">
                            <img src="images/home.png" width="65" height="60" />
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing consectetur adipi Lorem ipsum dolor sit amet, consectetur</p>
            </div>
    </div>
</li>
</ul>

我追求的效果如下： 将鼠标悬停在 ul.menu .item 上时，将 .right 的内容替换为 .m-desc。当然，由于有多个 .right 和 .m-dec 元素，我只是尝试引用正确的“最近”元素而不是全部。到目前为止我所拥有的是：

jQuery(function($) {
$('ul.menu .item').hover(function(){

    $(this).closest('ul').next('.right').html($(this).children('.m-desc').html());
},function(){});
});

位 $(this).children('.m-desc').html() 引用正确。不过，我无法正确遍历这一点：$(this).closest('ul').next('.right').html()。

$(this).closest('ul') 正确拉动，但是当我尝试添加 .next('.right') 时却没有。

我做错了什么？

Answer 1

试试这个：

$(this).closest('ul').nextAll('.right:first').html()

.next('.something') 只会选择下一个同级（如果它与您指定的选择器匹配）。看起来 .right 不是下一个，所以你什么也得不到。 .nextAll() 选择以下所有同级，然后将其缩减为那些具有right类的人。 :first 然后仅选择其中的第一个（确保最多一个选定的元素）。

Answer 2

来自 关于 .next() 的 jQuery 文档：

获取匹配元素集中每个元素的紧随其后的同级元素。如果提供了选择器，则仅当下一个同级与该选择器匹配时，它才会检索下一个同级。

尝试使用 .find() 代替。