How do I target the "this" element of "this's" child?

Question

Hi I am trying to target "this" child descendant of "this."

Below is a list that contains sublists.

What I am trying to accomplish is an understanding of how to select this child of this parent.

Basically when I click on Honda, the sublist expands and I want to console.log the text of each selected element when I click it. For simplification purposes I changed the code to a console.log.

So far what the code below returns is the text for everything within the li.

IE if I click Honda or If I click Accord, the console returns the values "Honda, Accord, and CRV."

How would I traverse "this" to get the text of the clicked child of "this". The "this" of "this".

IE if I select "Accord" using my code below it should return the text "Accord" alone.

Code:

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

Thanks all for answering! I think it will help to explain further what I am trying to accomplish.

What I am ultimately am trying to get sorted out is that I have a master accordion list with a list of car manufacturers and each manufacturer has a submenu like shown above.

I want to click on a list item, say Honda, it expands only Honda's list and shows their makes ie Accord and CRV. Then when I click on either Accord or CRV, it goes to their respective webpages.

When I click on a Ford, Honda's list should collapse or be hidden and Ford's should expand.

Answer 1

Here's a solution that makes your code work with minimal changes, however note that this setup is problematic since it creates a new (duplicate) event listener on every click.

$('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!");
    }
  })
})

As @freedomn-m pointed out, your selectors are probably too broad. I'm not exactly sure what you're ultimately trying to do with the line selecting the sub-menu, but here's an alternate solution that's cleaner:

$('.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