jQuery Traversing - how to get the right element

Question

Here is my html code. for a lot of reasons this cannot change:

<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>

The effect I'm after is as follows: on hover over ul.menu .item replace the contents of .right with .m-desc. Of course as there are multiple .right and .m-dec elements, I'm trying just to reference the correct 'nearest' ones rather than all. What I have so far is:

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

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

The bit $(this).children('.m-desc').html() is referencing correctly. I can't get the traversing right for this bit though: $(this).closest('ul').next('.right').html().

$(this).closest('ul') is pulling correctly, but when I try to add the .next('.right') it's having none of it.

What am I doing wrong?

Answer 1

Try this:

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

.next('.something') will only select the next sibling if it matches the selector you've specified. It doesn't look like .right is next, so you're getting nothing. .nextAll() selects all the following siblings, which you then reduce to those with class right. :first then selects just the first of those (ensuring at most one selected element).

Answer 2

From the jQuery docs on .next():

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Try using .find() instead.