Как настроить «этот» элемент «этого» ребенка?

Question

Привет, я пытаюсь настроить «» это « ребенок-потомок « это ».

Ниже приведен список, содержащий подсписки.

То, что я пытаюсь сделать это понимание того, как выбрать этот ребенок это родителя.

В основном, когда я нажимаю на Honda, подсписок расширяется, и я хочу, чтобы console.log текст каждого выбранного элемента, когда я нажимаю на него. Для упрощения я изменил код на console.log.

До сих пор код, приведенный ниже, является текстом для всего, что находится внутри ли.

IE, если я нажму Honda или если я нажимаю Аккорд, консоль возвращает значения "Honda, Accord и CRV."

Как бы я прошел «это», чтобы получить текст щелкнутого дочернего элемента «this». «Это» из этого.

IE если я выбираю «Аккорд» используя мой код ниже он должен вернуть текст «Аккорд» в одиночку.

Код:

<ul class="main-menu"> 
CARS 
<ul> 
    <li class="has-subs"> 
     <a href="">Honda</a> 
     <ul class="sub-menu"> 
      <li><a href="">Accord</a></li> 
      <li><a href="">CRV</a></li> 
     </ul> 
    </li> 
    <li class="has-subs"> 
     <a href="">Ford</a> 
     <ul class="sub-menu"> 
      <li><a href="">Mustang</a></li> 
      <li><a href="">Explorer</a></li> 
     </ul> 
    </li> 
</ul> 

$('body').on('click', '.main-menu ul li', function (e) { 
e.preventDefault(); 
$this = $(this); 
console.log($this.text()); 


if ($(this).find("a").text() == "CRV") { 
    var subMenu = $this.siblings('.sub-menu'); 
    console.log("'THIS' SELECTOR IS WORKING AS INTENDED!"); 
} 
}) 

Update:

Спасибо всем за ответы! Я думаю, что это поможет объяснить далее, чего я пытаюсь выполнить.

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

Я хочу щелкнуть по элементу списка, скажем, Honda, он расширяет список Honda и показывает их модели, т.е. Accord и CRV. Затем, когда я нажимаю на Accord или CRV, он переходит на соответствующие веб-страницы.

Когда я нажимаю на Ford, список Honda должен разрушаться или быть скрытым, а Ford должен расширяться.

Answer 1

Вот решение, которое заставляет ваш код работать с минимальными изменениями, однако обратите внимание, что эта настройка проблематична, так как она создает новое (дублирующее) событие слушателя при каждом нажатии.

$('body').on('click', '.main-menu ul li', function (e) { 
    e.preventDefault(); 
    $this = $(this); 
    console.log($this.text()); 

    $this.on('click', 'li', function(e) { 
    if ($(this).find("a").text() == "CRV") { 
     var subMenu = $this.siblings('.sub-menu'); 
     console.log("'THIS' SELECTOR IS WORKING AS INTENDED!"); 
    } 
    }) 
}) 

Как указано в разделе @ freedomn-m, ваши селекторы, вероятно, слишком широкие. Я не совсем уверен, что вы в конечном итоге пытается сделать с линией выбора подменю, но вот альтернативное решение, которое уборщик:

$('.has-subs>a').click(function(e) { 
    e.preventDefault(); 
    console.log($(this).parent().text()); 
}); 

$('.sub-menu>li>a').click(function(e) { 
    e.preventDefault(); 
    console.log($(this).text()); 
}); 

jsbin: http://jsbin.com/lurutiwago/edit?html,js,console,output

Answer 2

Ваш текущий селектор

.main-menu ul li 

найти все уль/li, под .main меню, так что будет соответствовать Honda и Accord/CRV.

Если вы хотите действовать только на элементы верхнего уровня (Honda), вы можете изменить селектор, чтобы быть более точным:

.main-menu>ul>li 

(при условии, что они правильно внутри .main меню).

Или, если вы хотите только нижние:

.main-menu>ul>li>ul>li 

или, в вашем случае, целью, 'уль' непосредственно

ul.has-subs>li 

или

ul.sub-menu>li