1

这是我的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替换.rightwith的内容.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')它时，它什么也没有。

我究竟做错了什么？

4

2 回答 2

2

试试这个：

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

.next('.something')如果它与您指定的选择器匹配，则只会选择下一个兄弟。它看起来不像.right是下一个，所以你什么也得不到。.nextAll()选择以下所有兄弟姐妹，然后将其减少为具有 class 的兄弟姐妹right。:first然后只选择其中的第一个（确保最多一个选定元素）。

于 2011-08-21T18:13:14.907 回答
0

来自.next() 的 jQuery 文档：

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

尝试使用.find()代替。

于 2011-08-21T18:12:24.353 回答