jQuery的從父

Question

的父母的父母選擇一個孩子，我有我剛剛建立了這個自定義菜單：

<div class="select_input_wrap"> 
    <div class="select_input_wrap_left"> 
     <input class="select_input" type="text" id="search_topics" autocomplete="off" spellcheck="false"> 
    </div> 
    <div class="select_input_wrap_right"></div> 
    <div class="clear"></div> 
    <div class="select_input_menu" id="search_topics_menu"> 
     <ul class="custom_select_menu"> 
      <li>Option 1Option 1Option 1Option 1Option 1Option 1Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
     </ul> 
    </div> 
</div> 

當有人點擊一個<li>，我想從裏面搶文本，並把它裏面最近的場地位於<li>之前。這不是我的網頁上唯一的菜單，因此使用$(this)，否則就像將.text()放入某個類或ID的輸入字段一樣簡單。

我一直在試圖像這樣的東西：

$('.custom_select_menu li').click(function() { 
    //$(this).closest('.select_input').val($(this).text()); 
    //$(this).closest('.select_input_wrap').children('input').val($(this).text()); 
}); 

但我就是無法到達那裏。請有人可以解釋如何實現這一目標？

Answer 1

你在正確的軌道上，但children只選擇所選元素的子元素，而不是子孫，可以用find方法代替。

$('.custom_select_menu li').click(function() { 
    $(this).closest('.select_input_wrap').find('input').val($(this).text()); 
}); 

Answer 2

會是這樣的工作嗎？

$('.custom_select_menu li').click(function() { 
    var field = $(this).parents('.select_input_wrap').find('.select_input'); 
    field.val($(this).text()); 
}); 

演示：http://jsfiddle.net/ZKnQh/

Answer 3

這需要一些解釋：

當你點擊你的LI，處理函數與李的上下文中執行。

所以，$（this）引用嵌入你的LI的jQuery對象。

第一：

$(this).closest('.select_input').val($(this).text()); 

不會起作用，因爲你的.select_input不是祖先的一部分 - 事實上這是你李:)父父的兄弟姐妹的孩子。 closest()只搜索祖先的全部行。

其次：

$(this).closest('.select_input_wrap').children('input').val($(this).text()); 

將無法​​工作或者是因爲children()只搜索深的孩子的第一個層次，所以你應該使用find()代替，這將是很好的 - 找到任何深層次

遞歸搜索

這就是爲什麼修改一點點你的第二次嘗試將工作：

$(this).closest('.select_input_wrap').find('input').val($(this).text());