Question

我想将特定的DIV添加到已定义类的其他DIV中。因为页面会定期更改，所以我会在每个DOM-Change上执行此操作。这种情况经常发生，并且有很多DIV（最多几千个）符合标准。

（这是一个扩展所以我无法修改源代码）

我是这样做的：

$('.Qg').each(function() {
  if ($(this).parent().find('.quickShare').length === 0)
  {      
    $(this).before('<div class="quickShare">(some more html)<br/></div>');
  }
});

这有效，但似乎不是很高效，主要是因为“每个” - 循环

是否有一种更优雅（尤其是高性能）的方式来获取父级不包含我的DIV的那些DIV（类似$('.Qg').parent().without('quickShare').each(function(){});（伪代码）？

更新：为了让DOM更清晰 - 示例：

<div class="anOuterDiv>
  <div class="Qg">something here</div>
</div>

<div class="anotherOuterDiv">
  <div class="quickShare">already added</div>
  <div class="Qg">something here</div>
</div>

我想在“Qg”之前添加“quickShare”div，但前提是它不存在。（所以我想得到上面的Qg，但不是更低的Qg）

Answer 1

给.Qg班级QgContainer的所有家长，然后执行：

$(".QgContainer:not(:has(.quickShare)) > .Qg").each(function() {
    ...
});

由于您无法更改网站，请尝试：

$(".Qg").filter(function() {
    return $(this).siblings(".quickShare").length == 0);
}).each(function() {
    ...
});

Answer 2

您可以过滤.Qg之前没有.quickShare兄弟的.before()，然后对其应用$('.Qg') .filter(function() { var node = this.previousSibling; // start with previous sibling while (node) { if (node.className == 'quickShare') { return false; // we found one } node = node.previousSibling; // keep trying with previous sibling } return true; }) .before('<div class="quickShare">(some more html)<br/></div>');：

{{1}}

Answer 3

如您所愿better(more perfomant)，那么您可以考虑使用纯Javascript。

HTML

<div class="anOuterDiv1">
    <div class="Qg">something here</div>
</div>
<div class="anOuterDiv2">
    <div class="quickShare">already added</div>
    <div class="Qg">something here</div>
</div>
<div class="anOuterDiv3">
    <div class="Qg">something here</div>
</div>
<div class="anOuterDiv4">
    <div class="quickShare">already added</div>
    <div class="Qg">something here</div>
</div>

的Javascript

Array.prototype.forEach.call(document.getElementsByClassName('Qg'), function (Qg) {
    var parentNode = Qg.parentNode,
        quickShares = parentNode.getElementsByClassName('quickShare'),
        newQuickShare;

    if(!quickShares.length) {
        newQuickShare = document.createElement('div');
        newQuickShare.className = 'quickShare';
        newQuickShare.textContent = 'Newly added';
        parentNode.insertBefore(newQuickShare, Qg);
    }
});

在jsFiddle

上

接下来我们应该将它与一些jQuery进行比较，因此我们将使用接受的答案。

$(".Qg").filter(function() {
    return $(this).siblings(".quickShare").length == 0;
}).each(function() {
    $(this).before('<div class="quickShare">Newly added</div>');
});

在jsFiddle

上

现在让我们看看他们在jsPerf

上的表现

Answer 4

这一次肯定会有效：

 $('div:only-child.Qg').each(function(){
   $(this).before('<div class="quickShare">(some more html)<br/></div>');
 });

试试这个。这非常简单易读，小巧且高效。

jsFiddle演示http://jsfiddle.net/VS6mG/

获得特定DIV的更好（更高性能）方式？

4 个答案: