Question

我有这样的事情：

<div id="foo">
    <div class="menu"></div>
    <a></a>
    <p></p>
    <div class="foot"></div>
</div>

<div id="bar">
    <div class="menu"></div>
    <h1></h1>
    <div class="foot"></div>
</div>

我希望这样的事情尽可能简单：

<div id="foo">
    <div class="menu"></div>
    <div class="wrapper">
        <a></a>
        <p></p>
        <div class="foot"></div>
    </div>
</div>

<div id="bar">
    <div class="menu"></div>
    <div class="wrapper">
        <h1></h1>
        <div class="foot"></div>
    </div>
</div>

（我添加了两个包装器）

使用jquery可以吗？我想做（$＆＃39; #foo .menu＆＃39;）之后的事情（＆＃39;＆＃39;），但我无法添加部分HTML代码。

Answer 1

定位所有孩子，但不是菜单：

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.1\Tools\AppDeploy\AppDeploy.exe

JSFiddle： http://jsfiddle.net/TrueBlueAussie/qejx0mj4/

我把它作为读者的练习，但很明显你可以包括两个选择器，或者使用另一个类并将每个结果包装在每个中：

e.g。

$('#foo >:not(.menu)').wrapAll('<div class="wrapper">');

或添加公共类

$('#foo >:not(.menu),#bar >:not(.menu)'').wrapAll('<div class="wrapper">');

JSFiddle： http://jsfiddle.net/TrueBlueAussie/qejx0mj4/1/

最后一个是我的偏好。

注意：您不需要在jQuery中关闭单级元素

e.g。您可以使用$('.pickme').each(function(){ $(">:not(.menu)", this).wrapAll('<div class="wrapper">') });而不是'<div class="wrapper">'

Answer 2

您可以使用：

'<div class="wrapper"></div>'

<强> Working Demo

Answer 3

在jquery中使用css选择器，如下所示

$("#foo>*:not(.menu)").wrapAll("<div 'wrapper'></div>");

并查看链接here

Answer 4

这是我的解决方案，现在提出的其他解决方案并没有循环遍历每个div：

$('div').each(function(index) {
        $('div:nth-child(' + index + ') > :not(.menu)').wrapAll('<div class="wrapper">');
    });

包装html的一部分

4 个答案: