Jquery доступ к отдаленным родителям - PullRequest
Новая
       39

Jquery доступ к отдаленным родителям

0 голосов
/ 30 августа 2011

Рассмотрим следующую структуру HTML для выпадающего меню: 

<ul class="tabMenu">
    <li><a href="#">Games</a>
     <div id="sub">
        <ul>
          <li><a href="#">Main</a></li>                         
          <li><a href="#">3D</a></li>
       </ul>
     </div>
    </li>
    <li><a href="#">Videos</a>
         <div id="sub">
            <ul>
              <li><a href="#">Main</a></li>                         
              <li><a href="#">3D</a></li>
           </ul>
        </div>
    </li>
</ul>

В этом меню я пишу некоторую строку, используя Jquery (Home - значение по умолчанию), которая сообщает пользователю, где он находится: 

<div class="Pointer"><a href="#">Home</a></div>

Следующий Jquery используется для определения категории / подкатегории: 

$('.tabMenu li a').click(function() {
            //get current link
            var currentLink = $(this);
            //get link text
            var linkText = currentLink.text();
            //Remove all activeTab classes
            $('.activeTab').removeClass('activeTab');
            //Add selected class with activeTab
            currentLink.parent().addClass("activeTab");
                    //Change pointer value according to the click
            $('.Pointer a').html(linkText);
        });

Функция Jquery должна возвращать строку, которая выглядит как Videos-> Main, если пользователь щелкает по подкатегории 'Main'из выпадающего меню «Видео» и «Игры»> «Главное», если пользователь выбирает «Главное из игр».Этот код дает только Главное, независимо от того, нажали ли вы на «Игры» или «Видео». Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

2 голосов
/ 30 августа 2011

Вы можете использовать jQuery closest, который получает первый элемент-предок, соответствующий селектору, начиная с текущего элемента и продвигаясь вверх по дереву DOM.

Работа демо 

$('.tabMenu li a').click(function() {
            //get current link
            var currentLink = $(this);
            //get link text
            var linkText = currentLink.text();

            //Remove all activeTab classes
            $('.activeTab').removeClass('activeTab');
            //Add selected class with activeTab
            currentLink.parent().addClass("activeTab");
                    //Change pointer value according to the click
            linkText = currentLink.closest('div').closest("li").children("a").text() + " > " + linkText ;
            $('.Pointer a').html(linkText);
        });
1 голос
/ 30 августа 2011

Попробуйте: 

// Will only affect subcategory links
$('.tabMenu li #sub a').click(function() {
  var parentCategory = $(this).parent().parents('li:first').children('a:first').html()
})
// Will only affect "Games" and "Videos" links
$('.tabMenu > li > a').click(function() {
  var category = $(this).html() 
})

Конечно, вы можете использовать их оба в селекторе ".tabMenu li #sub a", но я думаю, что этот способ чище.

0 голосов
/ 30 августа 2011

Во-первых, вы можете иметь только один экземпляр с таким же идентификатором. (ID = "суб"). Измени это на класс.

Попробуйте остановить всплытие событий, другими словами, убедитесь, что скрипт выполняется только один раз за клик.

...