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());