Question

我已经得到了下面的代码可以正常工作，但是添加项目的jquery没有找到data-parent-room值，只返回undefined。这是唯一不起作用的东西：（

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')

Answer 2

您需要告诉选择器中您想要的最近父母。通过具有属性data-parent-room

的div传递您的课程

$(this).closest('.widget.box.formHolder').attr('data-parent-room')

如果您使用data()代替attr来处理数据

，那会更好

$(this).closest('.widget.box.formHolder').data('parent-room')

Answer 3

$(this).closest('[data-parent-room]').data('parent-room');

jQuery .closest返回undefined

3 个答案: