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

来自jQuery docs on .next()：

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

请尝试使用.find()。

jQuery Traversing - 如何获得正确的元素

2 个答案: