jQuery选择除了孩子的孩子div之外的所有东西答案

【问题标题】：jQuery select everything but a child div of childrenjQuery选择除了孩子的孩子div之外的所有东西
【发布时间】：2014-07-09 18:42:41
【问题描述】：

我有以下 HTML 内容：

<div class="content">
    <div class="div-content">
        <div>
            <div class="div-botoes">
                <input id="bt1" type="button" tabindex="0" value="bt1">
                <input id="bt2" type="button" tabindex="0" value="bt2">
            </div>
            <ul class="divFormArea">
                <li id="li1">
                    <span><span>span</span></span>
                    <div>
                        <div>
                            <div> lorem ipsum </div>
                            <div> lorem ipsum </div>
                        </div>
                        <div>
                            <div> lorem ipsum </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                        </div>
                        <div>
                            <div> lorem ipsum </div>
                            <div> lorem ipsum </div>
                        </div>
                        <div>
                            <div> lorem ipsum </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li id="li2">
                    <span><span>span</span></span>
                    <div>
                        <div>
                            <div> lorem ipsum </div>
                            <div> lorem ipsum </div>
                        </div>
                        <div>
                            <div> lorem ipsum </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                        </div>
                        <div>
                            <div> lorem ipsum </div>
                            <div> lorem ipsum </div>
                        </div>
                        <div>
                            <div> lorem ipsum </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li id="li3">
                    <span><span>span</span></span>
                    <div>
                        <div>
                            <div> lorem ipsum </div>
                            <div> lorem ipsum </div>
                        </div>
                        <div>
                            <div> lorem ipsum </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                        </div>
                        <div>
                            <div> lorem ipsum </div>
                            <div> lorem ipsum </div>
                        </div>
                        <div>
                            <div> lorem ipsum </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                            <div>
                                <div> lorem ipsum </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li id="li4">
                    <span><span>span</span></span>
                    <div>
                        <div id="dontWantThisDiv" class="dont-want-this-div">
                            <div>
                                <div>
                                    Elements
                                </div>
                            </div>
                            <div>
                                Elements
                            </div>
                        </div>
                        <script id="script">
                            ScriptContent
                        </script>
                    </div>
                </li>
            </ul>
            <span><span><span>a</span>c<span>b</span></span>d</span>
        </div>
    </div>
</div>

我想使用一个 jQuery 1.9.1 选择器来为我带来关于这个内容的所有内容除了 div #dontWantThisDiv。

我尝试了很多选择器，但似乎没有人选择我想要的。这是Fiddle

【问题讨论】：

你不想要#dontWantThisDiv 的孩子还是不想要那个 div？
你试过浏览jQuery selectors docs吗？
可能是这样的：$('.content, .content *:not(#dontWantThisDiv)')?
如果选择子元素的父元素，即使没有选择子元素本身，被选择的父元素的html仍然会包含子元素的html。
拿走所有不想要的东西怎么办？ jsfiddle.net/CvS3k

标签： javascript jquery html jquery-selectors children

【解决方案1】：

如果你想获取 .content 下的所有元素，除了 #dontWantThisDiv 而不是选择器，你可以试试这个：-

var cloneHtml = $( ".content" ).clone().find('#dontWantThisDiv').remove();
console.log(cloneHtml.html())

【讨论】：

它不会从 dom 中删除原始 html 内容，但您会得到除特定 div 及其子项之外的所有内容。
好的，我会试试的。如果我仍然可以进行绑定（对于 Telerik 的 Kendo UI），我将使用您的建议 :)
它没有用。当我删除我不想要的这个 div 时，LI 和 UL 以及其他 DIV 也会被删除:(
我做了一些破旧的东西哈哈哈......这就像我问的那样只删除了 DIV，但是......当我调用 Kendo UI 绑定时仍然无法正常工作。但我不知道为什么：/无论如何，非常感谢您的回答

【解决方案2】：

因为您想返回整个 DOM 而没有特定的后代节点，所以无论您是否消除后代节点，您的结果实际上都只会包含单个顶级节点 (<div class="content">)。

如果允许您更改 HTML 内容本身，使用 $('#dontWantThisDiv').remove(); 从 DOM 中删除该节点并保留其他所有内容会容易得多。

如果您不允许更改 HTML 内容，那么可能会详细说明您的场景，我们可以看看是否有更有效的技术来实现它。

【讨论】：

不幸的是我不能修改 DOM。我正在使用 Telerik 的 Kendo UI，我需要在没有 DIV 的情况下绑定 DOM，否则它将引发异常。但我需要 DOM 的那一部分，因为我将它与其他 kendo.observable 对象绑定