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です。もちろん、複数のand要素があるため、すべてではなく正しい「最も近い」ものを参照しようとしています。私がこれまでに持っているものは次のとおりです。.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')何もありません。

私は何を間違っていますか？

4

2 に答える 2

2

これを試して：

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

.next('.something')指定したセレクターと一致する場合にのみ、次の兄弟が選択されます。次のようには見えない.rightので、何も得られません。.nextAll()次のすべての兄弟を選択し、それを class を持つ兄弟に減らしますright。:first次に、それらの最初のものだけを選択します（選択された要素が最大で1つになるようにします）。

于 2011-08-21T18:13:14.907 に答える
0

. next()のjQueryドキュメントから：

一致した要素のセット内の各要素の直後の兄弟を取得します。セレクターが指定されている場合、そのセレクターに一致する場合にのみ、次の兄弟を取得します。

代わりに.find()を使用してみてください。

于 2011-08-21T18:12:24.353 に答える