如何在jquery中选择元素的直接父级

时间:2011-12-25 04:02:24

标签: jquery

我很难在jquery中选择输入元素的直接父div,这是我到目前为止所尝试的内容,我还包括了当我尝试按Enter键时从每个输出中得到的输出包含bunso占位符的文本框:

<script src="jq.js"></script>
<script>
$(function(){
    $('#grand_lolo').keypress(function(e){
        var box = $(this).parents('div').attr('id'); //undefined
        var box2 = $(this).parent().closest('div').attr('id'); //undefined
        var box3 = $(this).parent().attr('id'); //(an empty string)
        var box4 = $(this).find("div:first").attr("id"); //lolo
        var box5 = $(this).find("div").attr("id"); //lolo
        var box6 = $(this).find("div:last").attr("id"); //apo
        var box7 = $(this).closest('div').attr('id'); //grand_lolo
        console.log(box);
        console.log(box2);
        console.log(box3);
        console.log(box4);
        console.log(box5);
        console.log(box6);

        console.log(box7);
    });


});
</script>
<div id="grand_lolo">
    <input type="text" placeholder="grand_lolo"/>
    <div id="lolo">
        <input type="text" placeholder="lolo"/>
        <div id="mama">
            <input type="text" placeholder="mama"/>
            <div id="ate">
                <input type="text" placeholder="ate"/>
            </div><!--end of ate-->

            <div id="bunso">
                <input type="text" placeholder="bunso"/>
            </div><!--end of bunso-->
        </div><!--end of mama-->

        <div id="papa">
            <input type="text" placeholder="papa"/>
            <div id="kuya">
                <input type="text" placeholder="kuya"/>

                <div id="apo">
                    <input type="text" placeholder="apo"/>
                </div><!--end of apo-->
            </div><!--end of kuya-->
        </div><!--end of papa-->
    </div><!--end of lolo-->
</div><!--end of grand_lolo-->

正如您所看到的,正确的输出应该是直接包含input元素的div的id。

3 个答案:

答案 0 :(得分:2)

只需将keypress附加到input元素 - http://jsfiddle.net/hyEhh/

即可
$('input').keypress(function() {
    alert($(this).parent().attr('id'));
});

答案 1 :(得分:2)

你正在以错误的方式做事。通过这种方式,您可以使用它来选择父div。 尝试像

这样的东西
$('input[placeholder="grand_lolo"]')keypress(function(e){
   var box = $(this).parent().attr('id'); 
   console.log(box);

});

如果要对所有输入执行此操作,请从选择器中删除[placeholder="grand_lolo"]

答案 2 :(得分:2)

$("input").each(function(){
   var id=$(this).parent().attr("id");
    $(this).attr("placeHolder",id);
});