我如何定位「這是」孩子的「這個」元素？

-1

嗨我試圖將目標「這個」子孫後代「這」。我如何定位「這是」孩子的「這個」元素？

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

我試圖做到的是如何選擇這個孩子的這家長的理解。

基本上，當我點擊本田時，子列表展開，我想console.log每個選定元素的文本，當我點擊它。爲了簡化目的，我將代碼更改爲console.log。

到目前爲止，下面的代碼返回的是li中所有內容的文本。

IE如果我點擊本田或者如果我點擊雅閣，控制檯返回值「本田雅閣，CRV和。」

我將如何遍歷「this」以獲取「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!"); 
} 
})

更新：

謝謝大家的回答！我認爲這將有助於進一步解釋我正在努力實現的目標。

我最終想弄清楚的是，我有一個主手風琴列表，上面有汽車製造商名單，每個製造商都有一個如上所示的子菜單。

我想點擊一個列表項目，說本田，它只擴大本田的名單，並顯示他們的產品，即雅閣和CRV。然後，當我點擊Accord或CRV時，它會轉到各自的網頁。

當我點擊一輛福特，本田的名單應該崩潰或隱藏，福特的應該擴大。

來源

2016-11-07 Kaeside Iwuagwu

'$（「身體」）.on（'click'，'.main-menu ul li ul li'，function（e）{' – Rayon

你可以給一個類添加一個子列表元素，然後添加一個eventlistener到這個，這將起作用.. – viveksinghggits

這裏有一個解決方案使您的代碼在最小的更改下工作，但請注意，此設置有問題，因爲它會創建新的（重複）事件每次點擊都會收聽。

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

來源

2016-11-07 19:14:11 kooc

您好Kooc，感謝您的回答！我最終想弄清楚的是，我有一個主要的手風琴名單與汽車製造商名單，每個製造商有一個子菜單如上所示。我想要的是隻有當我點擊一個清單項目時，纔有一個所有制造商的名單，本田說，它只擴大本田的名單，並顯示他們的產品，即雅閣和CRV。然後當我點擊Accord或CRV時，它會進入他們各自的網頁。當我點擊一輛福特，本田的名單應該崩潰，福特應該擴大。 –

這聽起來像一個非常簡單的情況，你可以使用這樣的庫：[link] https://jqueryui.com/menu/ – kooc

您當前選擇

.main-menu ul li

會發現所有 UL /李下。主要菜單，因此將匹配本田和雅閣/ CRV。

如果你想只在頂級項目（本田）採取行動，你可以改變你的選擇更加具體：

.main-menu>ul>li

（假設他們是正確的。主要菜單裏）。

或者，如果你只是想較低的：

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

，或者在你的情況，針對 'UL' 直接

ul.has-subs>li

或

ul.sub-menu>li

來源

2016-11-07 17:13:32

我如何定位「這是」孩子的「這個」元素？

回答

相關問題