javascript - jQuery .closest 返回未定义

Question

我有下面的代码可以正常工作，但是添加项目的 jquery 找不到数据父房间值，只是返回未定义。这是唯一不起作用的东西:(

HTML:

<div id="inventoryRooms">
    <!--BOX SHART-->
    <div class="widget box formHolder" data-parent-room="1">
        <!--ROOM NAME-->
        <form class="widget-header rooms">
            <input type="text" placeholder="Type Room name" name="roomName[]" class="form-input add-room-input input-width-xxlarge">
            <input type="hidden" class="roomId" name="roomId[]">
            <input type="hidden" class="inventoryId" name="inventoryId[]" value="<?=$_GET['inventory_id']?>">
            <div class="toolbar no-padding">
                <div class="btn-group">
                    <span class="btn saveRoom"><i class="icon-ok"></i> Save Room</span>
                </div>
            </div>
        </form>
        <!--/END-->
        <!--GENERIC ROW TITLES-->
        <div class="widget-header header-margin hide">
            <div class="row row-title">
                <div class="col-md-3"><h5>ITEM</h5></div>
                <div class="col-md-3"><h5>DESCRIPTION</h5></div>
                <div class="col-md-3"><h5>CONDITION</h5></div>
                <div class="col-md-2"><h5>PHOTOGRAPH</h5></div>
                <div class="col-md-1 align-center"><h5><i class="icon-cog"> </i></h5></div>
            </div>
        </div>
        <!--/END-->
        <!--ADD ITEM-->
        <div class="items">

        </div>
        <!--/END-->
        <div class="toolbar-small">
            <div class="btn-group">
                <span class="btn addItem"><i class="icon-plus"></i> Add Item</span>
                <span data-toggle="dropdown" class="btn dropdown-toggle"><i class="icon-gear"></i> Options<span class="button-space"></span><i class="icon-angle-down"></i></span>
                <ul class="dropdown-menu pull-right">
                    <li><a href="#"><i class="icon-trash"></i> Delete Room</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

jQuery:

$(document).on('click','.addItem', function(){
    $('<!--ROW START-->\
        <form class="widget-content item">\
            <div class="row">\
                <div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
                <div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                <div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                <input type="hidden" class="itemId" name="itemId[]" value="">\
                <input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
                <input type="hidden" name="itemParent[]" value="'+$(this).closest().attr('data-parent-room')+'">\
                <div class="col-md-2">\
                    <div class="fileinput-holder input-group">\
                    <input id="fileupload" type="file" name="files[]" data-url="uploads/">\
                    </div>\
                </div>\
                <div class="col-md-1 align-center"><i class="save icon-ok large"> </i>&nbsp;&nbsp;&nbsp;<i class="delete icon-trash large"> </i></div>\
            </div>\
        </form>\
    <!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items'));
    $(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
});

就像我说的，除了该死的数据父房间值外，一切都很好。任何帮助表示赞赏!使用 jQuery 1.10.1

Answer 1

你需要传递一个选择器到最近

//since the attribute data-parent-room is for the `formHolder` element
$(this).closest('.formHolder').att('data-parent-room')

或

//find the closest element with attribute data-parent-room
$(this).closest('[data-parent-room]').att('data-parent-room')

除了使用 .att('data-parent-room')，您还可以使用 .data('parentRoom')