Question

<fieldset id="tt">
    <div class="cts">
        <div class="tbox">
            <input type="text" class="pp"/>
        </div>
    </div>
    <div class="cts">
        <div class="tarea">
            <input type="text">
        </div>
    </div>
    <div class="cts">
        <div class="tbox">
            <input type="text" class="pp"/>
        </div>
    </div>
    <div class="cts">
        <div class="tarea">
            <input type="text">
        </div>
    </div>
</fieldset>

$('.cts').find('div:first').each(function(i){
    var attr = $(this).attr('class');
    alert(attr)
    switch(attr) {
        case "tbox":
            $('<div class="fieldProperties">        <input type="text" value="first" name="fields['+i+'].id" id="fields['+i+'].id"> </div>')
                .insertAfter($('.cts').find('div.tbox'));
            break;

        case "tarea":
            $('<div class="fieldProperties">        <input type="text" value="second" name="fields['+i+'].id" id="fields['+i+'].id"></div>')
                .insertAfter($('.cts').find('div.tarea'));
            break;
    }
});

在这里，我尝试在<div class="properties">和<div class="tbox">之后仅插入<div class="tarea"> <div class="properties">，但在此插入每个div。每次都会加载一些字段属性

我在DOM结构之下，但我不想这样

<fieldset id="tt">
    <div class="cts">
        <div class="tbox">
            <input type="text" class="pp">
        </div><div class="fieldProperties"><input type="text" id="fields[2].id" name="fields[2].id" value="first"></div><div class="fieldProperties"><input type="text" id="fields[0].id" name="fields[0].id" value="first"></div>
    </div>
    <div class="cts">
        <div class="tarea">
            <input type="hidden">
        </div><div class="fieldProperties"><input type="text" id="fields[3].id" name="fields[3].id" value="first"></div><div class="fieldProperties"><input type="text" id="fields[1].id" name="fields[1].id" value="first"></div>
    </div>
    <div class="cts">
        <div class="tbox">
            <input type="text" class="pp">
        </div><div class="fieldProperties"><input type="text" id="fields[2].id" name="fields[2].id" value="first"></div><div class="fieldProperties"><input type="text" id="fields[0].id" name="fields[0].id" value="first"></div>
    </div>
    <div class="cts">
        <div class="tarea">
            <input type="hidden">
        </div><div class="fieldProperties"><input type="text" id="fields[3].id" name="fields[3].id" value="first"></div><div class="fieldProperties"><input type="text" id="fields[1].id" name="fields[1].id" value="first"></div>
    </div>
</fieldset>

我正试图来到dom结构

<fieldset id="tt">
    <div class="cts">
        <div class="tbox">
            <input type="text" class="pp">
        </div><div class="fieldProperties"><input type="text" id="fields[0].id" name="fields[0].id" value="first"></div>
    </div>
    <div class="cts">
        <div class="tarea">
            <input type="hidden">
        </div><div class="fieldProperties"><input type="text" id="fields[1].id" name="fields[1].id" value="first"></div>
    </div>
    <div class="cts">
        <div class="tbox">
            <input type="text" class="pp">
        </div><div class="fieldProperties"><input type="text" id="fields[2].id" name="fields[2].id" value="first"></div>
    </div>
    <div class="cts">
        <div class="tarea">
            <input type="hidden">
        </div><div class="fieldProperties"><input type="text" id="fields[3].id" name="fields[3].id" value="first"></div>
    </div>
</fieldset>

Answer 1

在评论中澄清自己之后，我认为这就是你要找的东西：

jsFiddle Demo

$('.cts').find('div.tbox, div.tarea').each(function(i) {

    var val;

    switch ($(this).attr("class"))
    {
         case ("tbox"):
             val = "first";
             break;
         case ("tarea"):
             val = "second";
             break;
    }

    var properties = 
      $('<div class="fieldProperties">' +
        '<input type="text" value="' + val + '" name="fields['+i+'].id" ' +
        'id="fields['+i+'].id"> </div>');    

    properties.insertAfter(this);
});

我试图在<div class =“tbox”>和<div class =“tarea”>之后插入只有最新的<div class =“properties”>但这里每插入一个div </div> </div> </DIV>

1 个答案: