Question

我知道这有一个简单的解决方案。也许是因为它已经很晚了，但我已经撞墙了。我有一个容器div #jewelsContainer，里面有一个子div列表。我在这样的物体中抓住它：

var existingBoardItems = $('#jewelsContainer').html();

此对象生成#jewelsContainer容器div

中所有div的列表

即。 BEFORE

<div class="jewel jewel_5" data-row="1" data-col="0" data-jewel="5" style="left: 0px; top: 40px;"></div>
<div class="jewel jewel_3" data-row="0" data-col="3" data-jewel="3" style="top: 0px; left: 120px;"></div>
<div class="jewel jewel_5" data-row="0" data-col="4" data-jewel="5" style="top: 0px; left: 160px;"></div>
<div class="jewel jewel_4" data-row="0" data-col="5" data-jewel="4" style="top: 0px; left: 200px;"></div>
<div class="aff_score" style="left:0px; top:0px;">+10</div>
...

在

<div class="jewel jewel_5" data-row="1" data-col="0" data-jewel="5" style="left: 0px; top: 40px;"></div>
<div class="jewel jewel_3" data-row="0" data-col="3" data-jewel="3" style="top: 0px; left: 120px;"></div>
<div class="jewel jewel_5" data-row="0" data-col="4" data-jewel="5" style="top: 0px; left: 160px;"></div>
<div class="jewel jewel_4" data-row="0" data-col="5" data-jewel="4" style="top: 0px; left: 200px;"></div>
...

我需要循环遍历此对象中的所有div并删除任何没有类的.jewel然后为新创建的对象设置localStorage

localStorage.setItem('existingBoardItems',NEWELY CREATED OBJECT);

Answer 1

尝试在此上下文中使用:not()选择器，并且不需要迭代所有div。

$('#jewelsContainer div:not(.jewel)').remove();

DEMO

Answer 2

虽然已经接受了答案，但我觉得非jQuery解决方案也应该存在。 :not不是jQuery选择器，它是jQuery以及原生querySelector和querySelectorAll中支持的CSS选择器。

删除所述元素可能是这样的：

[].forEach.call(document.querySelectorAll('#container :not(.a)'), function(e,i){
    e.parentNode.removeChild(e);
})

或者这个：

var elms = document.querySelectorAll('#container :not(.a)');
for (var i = 0; i < elms.length; i++) {
    elms[i].parentNode.removeChild(elms[i]);
}

fiddle

这里有一个jsperf，表明香草在这种情况下的速度是其两倍多。编辑：似乎它只在chrome上更快。

Answer 3

试试这个方法

$('#jewelsContainer').find('div').each(function () {
   if (!$(this).hasClass('jewel')) {
        $(this).remove()
    }
});
localStorage.setItem('existingBoardItems',$('#jewelsContainer').html());
console.log(localStorage.getItem('existingBoardItems'));

DEMO

循环通过容器并删除没有某个类的div

3 个答案:

DEMO