Question

您好我正在尝试定位＆＃34; ＆＃34; >

的儿童后代

以下是包含子列表的列表。

我想要完成的是了解如何选择此父的这个的孩子。

基本上当我点击本田时，子列表会展开，我想在我点击它时控制每个所选元素的文本。出于简化目的，我将代码更改为console.log。

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

IE 如果我点击Honda或者如果我点击Accord，控制台将返回值＆＃34; Honda，Accord和CRV。＆＃34;

我将如何遍历＆＃34;这＆＃34;获取被点击的孩子的文字＃34;这个＆＃34;。＆＃34;这＆＃34; ＆＃34;这＆＃34;。

IE 如果我使用下面的代码选择＆＃34; Accord＆＃34; ，则应返回＆＃ 34;单独使用Accord＆＃34; 。

代码：

<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下找到所有 ul / li，因此会匹配Honda 和 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

我该如何定位＆＃34;这个＆＃34; ＆＃34;这个＆＃34;＆＃34;儿童？

2 个答案: