Блог

Главная - Вопросы по программированию - помощь jquery с функцией next ()

помощь jquery с функцией next ()

#javascript #jquery #show-hide #dom-manipulation

#javascript #jquery #показать-скрыть #dom-манипуляция

Вопрос:

У меня есть некоторая HTML-разметка, которая выглядит следующим образом,

         </a>
        <nav>
            <ul>
                <li><a href=""><img src="/media/icons/view.jpg" alt="Views"/> 210</a></li>
                <li><a href=""><img src="/media/icons/like.jpg" alt="Likes"/> 45</a></li>
                <li class="jobs"><a href="">52 New Jobs</a></li>
            </ul>
        </nav>
        <ul class="job_listings">
            <li><a href="">Outbound Telesales Assistant amp;></a></li>
            <li><a href="">Business Development Manager amp;></a></li>
        </ul
    </li>

.job_listings Скрыт в dom ready и должен отображаться при li.jobs a нажатии, я пробовал это со следующим, jQuery: 

 $('#jobwall .jobs a').click(function(){
                $(this).next('.job_listing').show();
                return false;
            });

Комментарии:

1. Что произошло, когда вы попробовали это? На что вы надеялись, что это произойдет, и почему?

Ответ №1:

Вы должны получить следующий элемент nav element, а не привязку, а также вам не хватает s в селекторе .job_listing.

Попробуйте это:

 $('#jobwall .jobs a').click(function(){                 
    $(this).closest("nav").next('.job_listings').show();                 
    return false;             
});

Комментарии:

1. Нет необходимости жестко кодировать элементы NAV и .job_listings как родственные. Мое решение более гибкое.

2. @Sime: Если есть только один контейнер, который будет содержать список вакансий, тогда нам не нужна никакая навигация, это может быть так просто, как $ («#jobListings»).show(). Но если она находится в повторяющемся списке, то мы не можем использовать id, поскольку id должен быть уникальным для всех элементов HML.

3. В этом случае общий предок может быть выбран по классу — это не проблема. Я хочу сказать, что переход к общему предку, а затем возврат к другому элементу является более гибким (= лучше), чем жесткое кодирование точной взаимосвязи между различными связанными элементами (в данном случае элементами NAV и .job_listings).

4. @Sime: Договорились перейти к общему предку, а затем вернуться назад (в этом случае вы не можете использовать ID selector, если это повторяющийся набор элементов).

Ответ №2:

Вот так:

 $(this).closest('#commonContainer').find('.job_listings').show();