0

我有这个我刚刚建立的自定义菜单：

<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()in 放入某个类或 id 的输入字段一样简单。

我一直在尝试这样的东西：

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

但我就是无法到达那里。请有人可以解释如何实现这一目标？

4

3 回答 3

3

你在正确的轨道上，但children只选择所选元素的子元素，而不是后代，你可以使用find方法来代替。

$('.custom_select_menu li').click(function() {
    $(this).closest('.select_input_wrap').find('input').val($(this).text());
});
于 2013-02-12T02:32:57.017 回答
1

这需要一些解释：

当您单击您的 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());
于 2013-02-12T02:37:39.223 回答
0

像这样的东西对你有用吗？

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

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

于 2013-02-12T02:36:53.947 回答