Question

我需要在所有其他内容之前插入div中的div，问题是我没有div id，我只有类作为选择器。 Div生成不在我的掌控之中。

假设，

<div class="divClass" >
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
</div>
<div class="divClass">
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
</div>

我需要使用class＆＃39; divClass＆＃39;在外部div中插入动态div。所以输出看起来像这样，

<div class="divClass" >
    <div id="mydiv" class="mydivclass"></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
</div>
<div class="divClass">
    <div id="mydiv" class="mydivclass"></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
</div>

我试过如下，

function AddSubMenuHeadings() {
            //Get all grouping for each menu 
            //1.Files Menu
            $('.filesMenu .divClass').each(function (index, ele) {
                debugger;
                var e = $('<div style="display:block; float:left;">somesubmenuheading</div>');
                var element = $('.filesMenu .' + ele.className + ' .divInnerClass')[0];
                $(element).before(e);
                e.attr('id', 'myid');
                //alert(ele);
            });
        }

但是这给了我错误的输出。它将所有动态生成的div插入第一个父div。

Answer 1

为什么不简单地使用 jQuery .prepend() ？

http://api.jquery.com/prepend/

Answer 2

function AddSubMenuHeadings() {
        $('.filesMenu .divClass').each(function (index, ele) {
            var e = $('<div style="display:block; float:left;">somesubmenuheading</div>');

            $(ele).prepend(e);
            e.attr('id', 'myid');
        });
    }

Answer 3

变化：

 $(element).before(e);

对于：

$(element).prepend(e);

Answer 4

你应该使用jQuery的prepend函数。
这是工作小提琴：

$(document).ready(function () {

    $("button").click(function () {
        $(".divClass").prepend('<div id="mydiv" class="mydivclass">NEW CONTENT</div> ');
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divClass">
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
</div>
<div class="divClass">
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
</div>
<button>Prepend div</button>

Answer 5

只需使用$(ele).prepend(e);代替$(element).before(e); - 在您的示例中，循环中的var ele是指您要添加项目的.divClass元素。

但是，我会用不同的方式写出来，就像这样：

$('.filesMenu .divClass').each(function (index, ele) {
    var $div = $('<div/>')
        .css({'display':'block', 'float':'left'})
        .attr('id', 'myId')//make the id dynamic
        .prependTo(ele);
});

Answer 6

首先，如果您要为动态创建的DOM元素分配ID，则ID必须是唯一的。这非常简单。

如果你正在使用jQuery，为什么不使用prepend()？

$(document).ready(function(){
    $(".divClass").prepend(e);
});

如何在另一个div中插入div？

6 个答案: