Question

我的代码就像这样

<div class="tab-1">
 <a class="parent-category" href="#">Link1</a>
 <a class="child-category first" href="#">Link2 </a>
 <a class="child-category" href="#">Link3 </a>
 <a class="child-category" href="#">Link4</a>
 <a class="child-category end" href="#">Link5</a>

 <a class="parent-category" href="#"> LinkA </a>
 <a class="parent-category" href="#"> LinkB </a>
 <a class="child-category first" href="#">LinkB1</a>
 <a class="child-category end" href="#">LinkB2</a>
</div>

我想要一个jquery过程来插入一个新的div“tab2”并在类.end第一次遇到时结束它的父div。如下

<div class="tab-1">
 <a class="parent-category" href="#">Link1</a>
 <a class="child-category first" href="#">Link2 </a>
 <a class="child-category" href="#">Link3 </a>
 <a class="child-category" href="#">Link4</a>
 <a class="child-category end" href="#">Link5</a>
 </div><div class="tab-2">
 <a class="parent-category" href="#"> LinkA </a>
 <a class="parent-category" href="#"> LinkB </a>
 <a class="child-category first" href="#">LinkB1</a>
 <a class="child-category end" href="#">LinkB2</a>
</div>

我试过after（）;, append（）; ，before（）; 。但每次我写

$(this).after('</div><div class="tab-2">');

它在浏览器上呈现为“<div class="tab-2"></div>”，我不想要。期待解决方案

Answer 1

与collapsar一样，您需要对DOM元素进行操作。

这是你可以做到的一种方式

// first create an empty `div` with class tab-2
$('.tab-1').after("<div class='tab-2'></div>");

// Find the first element with class .end, detach everything after it and put it in the next div
$('.tab-1 .end').first().nextAll().detach().appendTo('.tab-2');

在this fiddle中查看。

编辑：预计你可能想要创建多个div here's a loop来解决这个问题：

var i=1;
while ($('.tab-'+i+' .end').first().nextAll().length > 0)
{
    j = i+1;
    $('.tab-'+i).after("<div class='tab-"+j+"'></div>");
    $('.tab-'+i+' .end').first().nextAll().detach().appendTo('.tab-'+j);
    i += 1;
}

Answer 2

这不是jquery的工作方式。

它在dom抽象（树）上运行，而不是在词法表示上运行。

通过在词汇级别执行字符串替换操作，你可以按照你想要的方式行事：

var textual = $('#parent-div').html(); textual = textual.replace(/<some_pattern>/g, "<some_substitution>"); $('#parent-div').html(textual);
显然，这种做法不具备可读性和可维护性。

Answer 3

这应该对你有用......这是一个工作小提琴：DEMO

时：

$(function(){
    var newDiv = $('<div class="tab-2"></div>"');
    newDiv.insertAfter($('.child-category.end').first());
    newDiv.nextAll().appendTo(newDiv);
    newDiv.insertAfter($('.tab-1'));
});

Answer 4

这有点乱，但是做了你想要的，目前它被修复为tabs作为新div的类，但是你可以用函数中的另一个参数修复它。在许多end上工作，而不仅仅是你的例子中的两个，所有其他当前答案只能处理。 http://jsfiddle.net/VUmyD/

function splitContentsOf(selector) {
    iterator = 1;
    firstEndCount = 0;
    reset = false;
    $(selector).children().each(function (index1, child) {
        if ($(child).hasClass('end')) {
            if (firstEndCount == 0) {
                firstEndCount = index1;
            } else if (firstEndCount > 0) {
                var newDiv = document.createElement('div');
                iterator++;
                $(newDiv).addClass('tab-' + iterator);
                $(selector).children().each(function (index2, child2) {
                    if (index2 > firstEndCount && !reset) {
                        if ($(child2).hasClass('end')) {
                            reset = true;
                        }
                        $(child2).appendTo(newDiv);
                    }
                });
                reset = false;
                if (iterator > 2) {
                    $(oldDiv).after(newDiv);
                } else {
                    $(selector).after(newDiv);
                }
                oldDiv = newDiv;
            }
        }
    });
}

splitContentsOf('.tab-1');

在父div中插入一个新的div并同时结束它

4 个答案: