jquery：使用最接近的選擇器問題

我想學習一些jQuery，並通過一些教程工作。我在這個過程中很早，並且學習通過.parent(),.parents()和.closest()移動DOM。jquery：使用最接近的選擇器問題

我被拖了很長時間，然後變得困惑，爲什麼我不能選擇某個元素（p標籤與類），並添加一個類。

請注意，這些只是練習..我不會選擇這種方式，但我希望看到它可以完成。

<div class="container"> 
    <h1>Hello World</h1> 
    <h2>This is a tutorial</h2> 

    <p class="para">This is a tutorial for jquery and jquery UI</p> 


<div class="container"> 
    <ul class="listItem container"> 
     <li>Hello 1</li> 
     <li>Hello 2</li> 
     <li> 
      <ul class="nest"> 
       <li>Nest 1</li> 
       <li>Nest 2</li> 
      </ul> 
     </li> 
    </ul></div> 
</div>

jQuery的

//$('ul.listItem').find('li').first().addClass('listItem2'); 
//$('li').parent().removeClass('listItem'); 
$('ul.nest').children('li:first').addClass('listItem'); 
$('ul.listItem').closest('.container').removeClass('container'); 
$('ul.listItem').children('li:nth-child(2)').addClass('listItem3'); 
$('ul.listItem').closest('.para').addClass('listItem2'); 


//console.log($('ul').parents('.container')); 
console.log($('ul').closest('.container')); 
console.log($('ul.listItem').closest('.para'));

我的問題是，爲什麼不會選擇在這個例子中p標籤和類listItem2補充呢？它發現容器標籤很好，但不是p標籤，或者甚至是para類。在控制檯日誌中，它什麼都沒有顯示，但是卻發現容器類很好。只是以爲在繼續之前我應該知道。謝謝

來源

2014-01-09 Jamie Collingwood

最接近上升DOM樹，在你的例子中，'p'標籤是UL標籤父母的兄弟姐妹之一 – Rooster

.closest()搜索一個元素的所有父母（甚至元素本身）的匹配。

$('ul.listItem').closest('.para')

這不起作用，因爲.para不是ul的父。 ul的父母的是兩個.container divs（我猜<body>和<html>標籤）。

要選擇<p>，你可以這樣做：

$('ul.listItem').parent('div.container').prev('.para')

來源

2014-01-09 15:41:57

啊...明白了！我認爲它只是上了頁面並選擇了上面的任何p標籤。我想我假設它上面的所有內容都是以body標籤開始的父項。這是有道理的。謝謝！ –

不客氣：--D –

jquery：使用最接近的選擇器問題

回答

相關問題