如何定位 "this's" 子项的 "this" 元素？

Question

您好，我正在尝试定位 "this."

的“this” 子孙

下面是一个包含子列表的列表。

我想要完成的是了解如何 select this child of this parent.

基本上，当我点击 Honda 时，子列表会展开，我想 console.log 每个 selected 元素的文本，当我点击它时。为简化起见，我将代码更改为 console.log。

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

IE 如果我点击 Honda 或者如果我点击 Accord，控制台 returns 值 "Honda, Accord, and CRV."

我将如何遍历 "this" 来获取 "this" 的点击子项的文本。 "this".

的"this"

IE 如果我 select "Accord" 使用我的它下面的代码应该 return 文本 "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>

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

更新：

谢谢大家的回答！我认为这将有助于进一步解释我要完成的工作。

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

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

当我单击福特时，本田的列表应该折叠或隐藏，而福特的列表应该展开。

Answer 1

您当前的选择器

.main-menu ul li

会在 .main-menu 下找到 all ul/li，因此会匹配 Honda and Accord/CRV .

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

.main-menu>ul>li

（假设它们正确地位于 .main-menu 内）。

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

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

或者，在您的情况下，直接定位 'ul'

ul.has-subs>li

或

ul.sub-menu>li

Answer 2

这里有一个解决方案，可以让您的代码只需很少的更改即可工作，但请注意，此设置存在问题，因为它会在每次点击时创建一个新的（重复的）事件侦听器。

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

如何定位 "this's" 子项的 "this" 元素？

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

javascript

jquery

this

parent-child

dom-traversal