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

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>');

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/