2011-09-03 62 views
1

我最近開始在他們的網站使用Mootools 1.2的工作。我爲他們的內部CMS系統做了一些新的對象,並遇到了一些問題。圍繞幾個元素包裝新div(Mootools1.2)

系統將此代碼放入對象中。

<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,但我似乎無法得到它的權利。

任何人都可以給一個小指針如何輕鬆地做到這一點?我真的不需要改變任何東西,只需添加包裝。

/比約恩

回答

1

MooTools的文檔是你的朋友。在domready中

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

:對於這個我使用wraps()grab()

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/

+0

我挖看到不同的習慣用法MooTools的。 – artlung