jQuery Traversing - как получить нужный элемент

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 для .next () :

Получите ближайшего родственника каждого элемента в наборе соответствующих элементов.Если указан селектор, он получает следующий брат, только если он соответствует этому селектору.

Попробуйте вместо этого использовать .find () .