Question

如果我有一个类似元素的列表，那么：

<outer-container>
    <element attribute="x" />
    <element attribute="x" />
    .
    .
    .
    <element attribute="y" />
    <element attribute="z" />
</outer-container>

如何用attribute="x"包裹元素，使它们在自己的容器中？

<outer-container>
    <inner-container>
        <element attribute="x" />
        <element attribute="x" />
    </inner-container>
    .
    .
    .
</outer-container>

Answer 1

如果jQuery是一个选项：

$('[attribute="x"]').wrapAll('<inner-container/>');

演示：http://jsfiddle.net/iambriansreed/Hgp7B/

Answer 2

我更改了HTML以便于测试。

<div>
    <input attribute="x" />
    <input attribute="x" />
    <p>divider</p>
    <input attribute="y" />
    <input attribute="z" />
</div>

假设您想要将一个容器中的所有元素放在第一个找到的容器中，您可以这样做。

   // invoked like this
wrapAll('input[attribute=x]', 'span');

   // implemented like this
function wrapAll(selector, wrapper) {
    if (typeof wrapper === 'string')
        wrapper = document.createElement(wrapper);
    else if (!wrapper || !wrapper.nodeType)
        throw "Illegal 'wrapper' argument."

    var els = document.querySelectorAll(selector);

    els[0].parentNode.insertBefore(wrapper, els[0]);

    for(var i = 0, len = els.length; i < len; i++)
        wrapper.appendChild(els[i]);
}

http://jsfiddle.net/5z2uA/4/

如果您希望将不同的连续组包装在一起，则可以执行此操作。

   // invoked like this
wrapAdjacent('input[attribute=x]', 'span');

   // implemented like this
function wrapAdjacent(selector, wrapper) {
    if (typeof wrapper === 'string')
        wrapper = document.createElement(wrapper);
    else if (!wrapper || !wrapper.nodeType)
        throw "Illegal 'wrapper' argument."

    var els = document.querySelectorAll(selector);

    for (var i = 0, len = els.length; i < len; ) {
        var this_wrapper = wrapper.cloneNode(false);
        els[i].parentNode.insertBefore(this_wrapper, els[i]);
        do {
            this_wrapper.appendChild(els[i]);
            i++;
        }
        while (nextEl(this_wrapper) === els[i])       
    }
}
function nextEl(el) {
    while (el && (el = el.nextSibling) && el.nodeType !== 1) {}
    return el;
}

http://jsfiddle.net/5z2uA/5/

包含具有相同属性的元素

2 个答案: