Fastest way to access a node - javascript

I have about thousand DIV tags structured this way:
<div id="1">
<div class="1"></div>
<div class="2"></div>
...
</div>
<div id="2">
<div class="1"></div>
<div class="2"></div>
...
</div>
If I want to now access a particular node, say 'div#10 div.5' - what is the fastest way to do it using javascript DOM traversal? I already have the index values "10" and "5" - I am just looking for the fastest way to achieve this.
Thanks a lot.

If you've got about 1000 DIVs I assume this is auto generated html?
If so, is there any reason why you can't add an id to the inner DIVs too?
<div id="1">
<div id="1.1" class="1"></div>
<div id="1.2" class="2"></div>
...
</div>
<div id="2">
<div id="2.1" class="1"></div>
<div id="2.2" class="2"></div>
...
</div>
Then you can just use getElementById and not have to worry about ordering or spacing etc.
Since element ids have to be unique on the page then this should always be the fastest way to look up the element.

Without validation and assuming the child nodes are the only nodes and all in sequence;
document.getElementById('10').childNodes[4];
Watch out for whitespace that becomes a node https://developer.mozilla.org/En/Whitespace_in_the_DOM

using jquery:
alert($("#10 > .5").html());

Related

Enumerating data-targets in ng-repeat

I have an accordion in my HTML that is dynamically populated as such -
<div class="accordion">
<div class="accordion-panel">
<div class="accordion-heading>
<a data-target="#collapse" data-toggle="collapse">{{x.header}}</a>
</div>
<div id="collapse" class="accordion-body">
....
</div>
</div>
</div>
The problem is that the data-target remains static. So all the open/close buttons only open one piece of the accordion! The solution would be to enumerate the data-target/ids based on $index, but I don't know how to do that.
Is there a way to enumerate attributes in the way that I described? Or is there another solution I can use?
Just replace data-target value with #collepse-{{$index}} and ID of body with 'collapse-{{$index}}'
Hope this might be helpful to you!!

Which one is the better way for performance to set a hover event on a div?

Which one is the better way for performance to set a hover event on a div with class 'con'?
Is there any difference?
$('.con').hover(func(){});
$('.content0.content.%etc%.con').hover(func(){});
var con = $('.con'); con.hover(func(){});
<script>
$('.con').hover(func(){});
</script>
<div class="content0">
<div class="content">
<div class="fl grad">
<div class="fl bor_rad bor_gray adver1">
<div class="clear">
<div class="fl left_ot">
<div class="bor_orang h150">
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
There's no significant difference between the three ways you listed, provided the two different selectors you've given select the same elements.
Note that the element lookup is done once, when you do the $("selector here") part. It's not repeated when the hover occurs.
Side note: Probably 95% of what I've seen people do in hover event handlers can, on modern browsers (e.g., not IE7 and earlier), be better achieved with CSS using the :hover pseudoclass. The other 5% can't, and you haven't said what you're doing and it may well be in that 5%, but I thought I'd point it out... :-)
1. $('.con').hover(func(){});
2. $('.content0.content.%etc%.con').hover(func(){}); var con =
3. $('.con'); con.hover(func(){});
all three work but they take time
because every time jQuery search in all document(DOM) then come to your selector
so use context by this we tell in jQuery that search not in all document but search form this element like below..
in your html
<div class="content0">
<div class="content">
<div class="fl grad">
<div class="fl bor_rad bor_gray adver1">
<div class="clear">
<div class="fl left_ot">
<div class="bor_orang h150">
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
now if you write
$('.con').hover(func(){});
then it reach your selector by following way
first go to
document
|
body
|
content0(class)
|
content (class)
|....
...
then at last your selector '.con'
so it will take time
to get better result define context by this it know from where it search your selector like
$('.con','.content0').hover(func(){});
now it reach your selector by following way
first go to
content0(class)
....
...
then at last your selector '.con'
Context really helps when you have a much larger DOM that you are searching through. Searching for IDs is already very fast and context doesn't really help that much in that case. Where context can really make a difference is when you are selecting by tag name or class.
Try testing like this: http://jsbin.com/aciji4/4
you can really see the timing get better for context when you bump up number of items in the DOM like this: http://jsbin.com/aciji4/6
reference Performance of jQuery selector with context

JQuery .html() usage

Say I have
<div id="controller">
<div id="first">1</div>
<div id="second">2</div>
</div>
$('#controller').html().which returns
<div id="first">1</div>
<div id="second">2</div>
How do I get .html() to return
<div id="controller">
<div id="first">1</div>
<div id="second">2</div>
</div>
Or is there an alternate function for that?
Wrap it (ie. a clone) inside another parent
$('<div></div>').append($('#controller').clone()).html();
Also, check out a similar question.
You need to use outerHTML
Live Demo
$('#controller')[0].outerHTML
You can add your div's clone to dynamically created div and use html of it.
$('<div>').append($('#controller').clone()).html();

Using eq() and find() to add a class

I have a few divs within a containing div, eg:
<div id="container">
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
</div>
I want to add a class to the 2nd 'item' div, so I created:
$('#container:eq(1)').find('.item').addClass('newclass');
This isnt working. I have also tried using nth-child() as well, also to no avail.
Can anyone suggest to me a better way of going about this?
May be this is what you want:
$('#container').find('.item').eq(1).addClass('newClass')
Your are missing # for id selector, also need to modify the selector.
Live Demo,
$('#container .itmeholder:eq(1)').find('.item').addClass('newclass');
try this
$('#container').find('.item').eq(1).addClass('newclass');​
First, you target the container separately:
$('#container')
Then fetch its children, limiting it to only the 2nd child:
.children(':eq(1)')
The perform the rest of your search and action:
.find('.item')
.addClass('newclass');
Complete code:
$('#container')
.children(':eq(1)')
.find('.item')
.addClass('newclass');
$('#container .itmeholder:eq(1)').find('.item').addClass('newclass');
First find the inner element childs and use eq to find the required item and add class to it

How to use JS innerHTML by class name and child of a class

Is it possible to do a
document.getElementBy Class ("post[1] .classname").innerHTML ?
post[1] to be the second DIV with class='post' and I want the child .classname of this.
For example: I want to get the innerHTML of the second post => div class="inside".
<div class="post">Post 1
<div class="inside"></div>
</div>
<div class="post">Post 2
<div class="inside">//this here</div>
</div>
<div class="post">Post 3
<div class="inside"></div>
</div>
But if you don't want to use jQuery, but are OK with only supporting later browsers, you can use document.querySelector. http://jsfiddle.net/mendesjuan/4hEwd/
document.querySelector('.post:nth-child(2) .inside').innerHTML
Here's a list of browsers that support it: http://caniuse.com/queryselector
Try using jQuery:
alert($('.post:nth-child(2) > div').html());
JSFiddle here.

Categories