如何在页面加载后找到一堆元素并在新div中重新组合它们？

So yes, my head hurts. What i aim to achieve:

是的，我的头疼。我的目标是：

i have content that is generated dynamically from php inside a page, eg, i use a PHP include to fetch content. Now once this content has loaded, i wish to use javascript/jQuery in order to find certain elements by ID, see if theres more than one, if there is, then group them in a new div.

我有从页面内的php动态生成的内容，例如，我使用PHP包来获取内容。现在一旦加载了这个内容，我希望使用javascript / jQuery来按ID查找某些元素，看看是否有多个，如果有的话，然后将它们分组到一个新的div中。

For example; i have a div named 'pony', the page has 3 other divs, also named 'pony', using javascript/jQuery i wish to house them in a new div named 'horse' which will be generated on the fly. I should also say the new div has to be generated at the top of the page.

例如;我有一个名为'pony'的div，该页面有另外3个div，也叫'pony'，使用javascript / jQuery我希望将它们放在一个名为'horse'的新div中，它将动态生成。我还应该说新的div必须在页面顶部生成。

But i have a div named 'cows' and there is only one, i want js/jQuery to ignore that one.

但我有一个名为'奶牛'的div，只有一个，我希望js / jQuery忽略那个。

Does anyone know how to do this? Rather if PHP would be easier, then id welcome the knowledge of that too.

有谁知道如何做到这一点？相反，如果PHP会更容易，那么id也欢迎这方面的知识。

2 个解决方案

#1

If you use a class to define the previous divs, you can use the $(".pony") selector to have a count of the number of divs generated dynamically, then create a new DOM element called 'horse' and append the previous pony divs to it as such:

如果你使用一个类来定义前面的div，你可以使用$（“。pony”）选择器来计算动态生成的div数，然后创建一个名为'horse'的新DOM元素并追加前一个小马这样说：

$(function() {
    var listPony = $(".pony");

    if (listPony.length >= 3)
    {
        var newDiv = $("<div class='horse'></div>").append(listPony);
        $('body').prepend(newDiv);
    }
});

Full example here:

完整的例子：

http://jsfiddle.net/CPAfA/

#2

Having mutliple elements with same ID is not valid.

具有相同ID的mutliple元素无效。

However if you cannot avoid it, then try using something like this:

但是，如果你无法避免它，那么尝试使用这样的东西：

$(function(){
    var ponies = $("[id='pony']");
    if(ponies.length > 1){
        $("<div id='horse' ></div>").prependTo("body").append(ponies);
    } 
});

#1

$(function() {
    var listPony = $(".pony");

    if (listPony.length >= 3)
    {
        var newDiv = $("<div class='horse'></div>").append(listPony);
        $('body').prepend(newDiv);
    }
});