0

我的代码是这样的

<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(); , 前(); . 但每次我写

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

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

4

4 回答 4

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

看它住在这个小提琴里。

编辑:预计您可能想要创建多个 div,这里有一个循环可以解决这个问题:

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;
}
于 2013-08-20T12:22:23.980 回答
0

这有点乱,但可以满足您的要求,目前它已固定为tabsnewdiv的类,但您可以使用函数中的另一个参数来修复它。在这里工作很多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');
于 2013-08-20T12:34:52.800 回答
0

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

JS:

$(function(){
    var newDiv = $('<div class="tab-2"></div>"');
    newDiv.insertAfter($('.child-category.end').first());
    newDiv.nextAll().appendTo(newDiv);
    newDiv.insertAfter($('.tab-1'));
});
于 2013-08-20T12:16:06.480 回答
0

这不是 jquery 的工作方式。

它作用于 dom 抽象(树),而不是词法表示。

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

var textual = $('#parent-div').html();
textual = textual.replace(/<some_pattern>/g, "<some_substitution>");
$('#parent-div').html(textual);

显然,这种做法在可读性和可维护性方面并不能很好地扩展。

于 2013-08-20T12:02:21.890 回答