How to hide element with DOM path (and class) in HTML document

JavaScript performance comparison

Test case created by PeeHaa

Info

SO question: http://stackoverflow.com/questions/16137043/how-to-hide-element-with-dom-path-and-class-in-html-document

Preparation code

<div class="list first">
  <span class="total">2</span>
  <div class="object"></div>
</div>

<div class="list">
  <span class="total">7</span>
  <div class="object"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Preparation code output

2
7

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Vucko's answer
var text = []; // array to put all the span values in
$('.total').each(function(){  //putting the values of span one by one into the array
    text.push( $(this).text());
});

$.each(text,function(){ //looping through the array and if the array value is larger then 2 ,it trigger the if statment
    if(this>2){
        $('.first').hide();
    }
});
pending…
Ambrosia's answer 1
var divs = document.getElementsByTagName("div");
for(var i=0; i < divs.length; i++)
{
    if((" "+divs[i].className+" ").replace(/[\n\t\r]/g, " ").indexOf(" list ") > -1)
    {
        if((" "+divs[i].className+" ").replace(/[\n\t\r]/g, " ").indexOf(" first ") > -1)
        {
            var spans = divs[i].getElementsByTagName("span");
            for(var j = 0; j < spans.length; j++)
            {
                if((" " + spans[j].className +" ").replace(/[\n\t\r]/g, " ").indexOf(" total ") > -1)
                {
                    if(spans[j].innerHTML > 2)
                    {
                        spans[j].style.display = "none";
                    }
                }
            }
        }
    }
}
pending…
Ambrosia's answer 2
$('div.list.first .total').each(function()
{
    if($(this).text() > 2)
        $(this).parent().hide();
});
pending…
Jon P's answer
if($(".total").filter(function (){return $(this).text() >2; }).length > 0)
{
    $(".first").hide();
}
pending…
PeeHaa's answer
    var totals = document.querySelectorAll('span.total');
    for (var i = 0, l = totals.length; i < l; i++) {
        if (totals[i].childNodes[0].nodeValue < 2) {
            continue;
        }
   
        document.querySelector('.list.first').style.display = 'none';
    }
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

5 comments

to chase your dreams commented :

Everyone loves it when folks get together and share opinions. Great blog, keep it up!

therapist cell phone commented :

Unquestionably consider that that you stated. Your favorite justification seemed to be on the web the easiest factor to consider of. I say to you, I definitely get annoyed whilst folks think about concerns that they just don't understand about. You controlled to hit the nail upon the highest as smartly as outlined out the whole thing without having side effect , people can take a signal. Will likely be again to get more. Thank you

chase your dreams ppt commented :

Wow, that's what I was exploring for, what a data! present here at this website, thanks admin of this site.

Add a comment