jQuery从父项的父项中选择子项
jQuery从父项的父项中选择子项
提问于 2013-02-12 10:30:23
我有一个我刚刚构建的自定义菜单：
<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());
});但我就是到不了那里。有没有人能解释一下如何做到这一点？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-12 10:32:57
您是在正确的轨道上，但是children只选择了所选元素的子元素，而不是子元素，您可以使用find方法。
$('.custom_select_menu li').click(function() {
$(this).closest('.select_input_wrap').find('input').val($(this).text());
});Stack Overflow用户
发布于 2013-02-12 10:37:39
这需要一些解释：
当您单击LI时，将使用LI的上下文执行处理程序函数。
因此，$(this)引用嵌入LI的jQuery对象。
首先：
$(this).closest('.select_input').val($(this).text());将无法工作，因为您的.select_input不是祖先的一部分-事实上，这是您的li :)的父的父级的同级的子级。closest()仅搜索整个祖先行。
其次：
$(this).closest('.select_input_wrap').children('input').val($(this).text());也不会起作用，因为children()只在第一级的子级上搜索，所以你应该使用find()，这会很好--递归地查找任何深层的搜索
这就是为什么你的第二次尝试可以稍微修改一下的原因：
$(this).closest('.select_input_wrap').find('input').val($(this).text());Stack Overflow用户
发布于 2013-02-12 10:36:54
像这样的东西对你有用吗？
$('.custom_select_menu li').click(function() {
var field = $(this).parents('.select_input_wrap').find('.select_input');
field.val($(this).text());
});演示：http://jsfiddle.net/ZKnQh/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14824519
复制相关文章
相似问题
腾讯云开发者
