Question

我想添加一个父div。

<div id="faceone"><img src=""></div>

<div id="facetwo" ><img src=""></div>

<div id="facethree"><img src=""></div

<div id="facefour"><img src=""></div>

这是四个div，我想在它们上面添加一个父div。我试过这个

$('#faceone').wrapAll('<div class="cubeSpinner">');

但这只是在faceone上面添加了cubeSpinner

<div class="cubeSpinner">

<div id="faceone"><img src=""></div>

</div>
<div id="facetwo" ><img src=""></div>

<div id="facethree"><img src=""></div

<div id="facefour"><img src=""></div>

但我希望结果应该像这样

<div class="cubeSpinner">

<div id="faceone"><img src=""></div>

<div id="facetwo" ><img src=""></div>

<div id="facethree"><img src=""></div

<div id="facefour"><img src=""></div>

</div>

Answer 1

您需要选择所有元素才能将它们包装起来。我建议为它们添加一个公共类，但与此同时，您可以使用attribute selector [id^="face"]选择所有以{face}开头的id属性的元素：

$('[id^="face"]').wrapAll('<div class="cubeSpinner"></div>');

Answer 2

我在JSfiddle https://jsfiddle.net/azu2s4r9/

上展示了这个例子

您应该使用.wrapAll（）jquery函数，并为四个现有// The subsystem that contains the production code class Interface { void nonVirtualFunction(); } // Contains the same functions as Interface but does not derive from it class Implementation { void nonVirtualFunction(); }; // wrapper base class that provides the virtual interface template<typename Interface> class AutoWrapper { // Do some magic to provide the same functions that Interface has, but virtual. } // Class to provide the interface of AutoWrapper<Interface> but calls the functions in Implentation. template<typename Implementation, template Interface> class AutoWrapperImpl { // do some other magic here ... };标记中的每一个添加一个公共类名。您的新原始代码将如下所示。

// code using the AutoWrapper
void useAutoWrapper()
{
    AutoWrapper<Interface> wrapper = new AutoWrapper<Interface>();
    wrapper->nonVirtualFunction();    // calls Interface::nonVirtualFunction()

    wrapper = new AutoWrapperImpl<Interface,Implementation>();
    wrapper->nonVirtualFunction();    // calls Implementaion::nonVirtualFunction()
}

然后你的jquery代码应该是这样的。

<div>

生成的代码看起来像这样，你想要它完成。

<div id="faceone" class="test"><img src=""></div>
<div id="facetwo" class="test"><img src=""></div>
<div id="facethree" class="test"><img src=""></div>
<div id="facefour" class="test"><img src=""></div>

这提供了一个完整的解决方案，几乎适用于所有情况。祝你好运！

在多个div上添加父div

2 个答案: