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

需要一些解释：

当您点击LI时，处理程序函数将使用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());

Answer 3

这样的事情对你有用吗？

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

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

jQuery从父级父级的父级中选择一个子级

3 个答案: