Javascript 我如何瞄准“目标”；这"；“的要素”；这'；s"；小孩

您好，我正试图瞄准“这个”这个的后代。

下面是包含子列表的列表

我试图完成的是理解如何选择这个父母的孩子

基本上，当我单击Honda时，子列表将展开，我希望在单击时console.log每个选定元素的文本。为了简化起见，我将代码更改为console.log

到目前为止，下面的代码返回的是li中所有内容的文本

即如果单击本田或雅阁，控制台将返回值“Honda、Accord和CRV”

我如何遍历“this”以获得“this”的单击子项的文本。“这个”中的“这个”

IE如果我使用下面的代码选择“Accord”，它将单独返回文本“Accord”

代码：

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

更新：

谢谢大家的回答！我认为这将有助于进一步解释我试图实现的目标

我最终想要弄清楚的是，我有一个主手风琴列表和一个汽车制造商列表，每个制造商都有一个子菜单，如上图所示

我想点击一个列表项，比如本田，它只扩展了本田的列表，并显示了他们的品牌ie雅阁和CRV。然后，当我点击Accord或CRV时，它会进入各自的网页

当我点击一辆福特汽车时，本田的列表应该折叠或隐藏，而福特的列表应该扩展。

您当前的选择器

.main-menu ul li

将在主菜单下找到所有ul/li，因此将匹配本田和雅阁/CRV

如果您只想对顶级项目（本田）执行操作，您可以将选择器更改为更具体：

.main-menu>ul>li

（假设它们在主菜单的正确位置）

或者，如果您只想要较低的：

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

或者，在您的情况下，直接针对“ul”

ul.has-subs>li

或

---

这里有一个解决方案，可以使您的代码在进行最小更改的情况下工作，但是请注意，此设置是有问题的，因为它在每次单击时都会创建一个新的（重复的）事件侦听器

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

$（'body'）。在（'click'，'上。主菜单ulli'，函数（e）{

你只需给子列表元素一个类，然后给它添加一个eventlistener，这就行了..嗨，库克，谢谢你的回答！我最终想要弄清楚的是，我有一个主手风琴列表和一个汽车制造商列表，每个制造商都有一个子菜单，如上图所示。我想要的是只有当我点击一个列表项，比如本田，它才会扩展本田的列表，并显示他们的品牌，即雅阁和CRV。然后当我点击雅阁或CRV时，它会进入他们各自的网页。当我点击福特时，本田的列表会崩溃，而福特的列表会扩展。这听起来像是一个非常复杂的问题ghtforward案例，您可以使用如下库：[link]

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

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