代码之家 › 专栏 › 技术社区 › Ole Albers

获得特定DIV的更好(更高效)方式?

dom jquery javascript

Ole Albers · 技术社区 · 12 年前

我想将特定DIV添加到已定义类的其他DIV。因为页面会定期更改,所以我在每次DOM更改时都会这样做。这种情况经常发生,有很多DIV(最多1000个)符合标准。

(这是一个扩展,因此我无法修改源)

我是这样做的:

$('.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)

4 回复 | 直到 12 年前

Barmar 12 年前

给所有的父母 .Qg 班级 QgContainer ,然后执行以下操作:

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

由于无法更改网站,请尝试:

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

Xotic750 12 年前

如你所愿 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>

Java脚本

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

JaÍ¢ck 12 年前

您可以过滤每个 .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>');

Amit Joki 12 年前

这一次肯定会奏效:

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

试试这个。这是非常容易和可读的,小而高性能。

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