[英]Better (more performant) way to get specific DIVs?
I want to add a specific DIV to other DIVs of a defined class. 我想将特定的DIV添加到已定义类的其他DIV。 Because the page changes regularly I do this on every DOM-Change.
因为页面会定期更改,所以我会在每个DOM-Change上执行此操作。 This happens quite often and there are a lot of DIVs (up to a few 1000) that meet the criteria.
这种情况经常发生,并且有很多DIV(最多几千个)符合标准。
(This is an extension so I cannot modifiy the source) (这是一个扩展,所以我不能修改源)
I do it this way: 我是这样做的:
$('.Qg').each(function() {
if ($(this).parent().find('.quickShare').length === 0)
{
$(this).before('<div class="quickShare">(some more html)<br/></div>');
}
});
That works but does not seem to be very performant, mainly because of the "each" - Loop 这有效,但似乎并不是非常高效,主要是因为“每个” - 循环
Is there a more elegant (and especially performant) way to get only those DIVs which's parent do not contain my DIV (something like $('.Qg').parent().without('quickShare').each(function(){});
(pseudocode)? 是否有更优雅(尤其是高性能)的方式来获得父级不包含我的DIV的那些DIV(类似于
$('.Qg').parent().without('quickShare').each(function(){});
(伪代码)?
Update: To make it clearer a DOM-Example: 更新:为了让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>
I want to Add the "quickShare" div before the "Qg", but only if it does not exist. 我想在“Qg”之前添加“quickShare”div,但前提是它不存在。 (So I want to get the upper Qg, but not the lower Qg)
(所以我想得到上面的Qg,但不是更低的Qg)
Give all the parents of .Qg
the class QgContainer
, then do: 给
.Qg
的所有父母QgContainer
,然后做:
$(".QgContainer:not(:has(.quickShare)) > .Qg").each(function() {
...
});
Since you can't change the site, try: 由于您无法更改网站,请尝试:
$(".Qg").filter(function() {
return $(this).siblings(".quickShare").length == 0);
}).each(function() {
...
});
You can filter each .Qg
that's not preceded by a .quickShare
sibling and then apply .before()
on that: 您可以过滤每个
.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>');
As you wanted better(more perfomant)
then you could consider using pure Javascript. 如你想要的
better(more perfomant)
那么你可以考虑使用纯Javascript。
HTML 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 使用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);
}
});
Next we should actually compare it against some jQuery, so we will use the accepted answer. 接下来我们应该将它与一些jQuery进行比较,因此我们将使用接受的答案。
$(".Qg").filter(function() {
return $(this).siblings(".quickShare").length == 0;
}).each(function() {
$(this).before('<div class="quickShare">Newly added</div>');
});
And now lets see how they perform on jsPerf 现在让我们看看它们在jsPerf上的表现
This time it will definitely work: 这一次肯定会奏效:
$('div:only-child.Qg').each(function(){
$(this).before('<div class="quickShare">(some more html)<br/></div>');
});
Try this. 尝试这个。 This is very easy and readable and small and performant.
这非常简单易读,体积小,性能高。
jsFiddle Demo http://jsfiddle.net/VS6mG/ jsFiddle演示http://jsfiddle.net/VS6mG/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.