围绕几个元素包裹新div(Mootools1.2)

时间:2011-09-03 14:38:27

标签: mootools

我最近开始在他们的网站上使用Mootools 1.2工作。我正在为他们的内部CMS系统做一些新的对象,并遇到了一些问题。

系统为对象提供此代码。

<div class="object_start">Title</div>
<div class="normaltext">Blahahahahaha</div>
<div class="normaltext">More text</div>
<div class="singlebox">Some content</div>
<div class="object_end></div>

我需要用这个来包装div,....通过javascript。

由于此对象应该能够在网站上多次出现,我已经开始使用类似

的内容
function apply_drop() {
  $$('.object_start').each(make_drop_tab_group_of_tab);
}

window.addEvent('domready', apply_drop);

开始浏览存在object_start的元素的每个实例。

基本上我想逐步遍历object_start中的每个元素,直到它使用类object_end到达div然后将新div包围在它周围,但我似乎无法正确使用它。

任何人都可以给一个小指针如何轻松地做到这一点?我真的不需要改变任何东西,只需添加包装器。

/的Björn

2 个答案:

答案 0 :(得分:1)

MooTools文档是您的朋友。为此,我使用wraps()grab()

function apply_drop() {
    var beginWrapping = false, wrapper;
    // iterate over all divs
    $$('div').each(function(item){
        // if .object_start, wrap it in a div with class .wrapper
        // and then start wrapping all elements until we hit
        // a div with class .object_end
        if (item.hasClass('object_start')){
            wrapper = new Element('div').addClass('wrapper').wraps(item);
            beginWrapping = true;
        } else if (beginWrapping) {
            wrapper.grab(item);
        }
        if (item.hasClass('object_end')) {
            beginWrapping = false;
        }
    });

}
window.addEvent('domready', apply_drop);

答案 1 :(得分:1)

在您的domready中:

document.getElements("div.object_start").each(function(el) {
    var wrapper = new Element("div", {
        "class": "wrap"
    }), end = false, next;

    while(!end) {
        next = el.getNext(); // siblings
        if (!next || next.hasClass("object_end")) end = true;
        if (next) next.inject(wrapper); // will work if no object_end found gracefully.
    }

    // done finding siblings, now replace the orig div.
    wrapper.wraps(el, "top");
});

http://jsfiddle.net/w4brx/