jquery-id-selectors (v2)

Revision 2 of this benchmark created by Serj on


Description

Reasonably-sized markup taken directly from http://stackoverflow.com/questions/7211251.

Preparation HTML

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

<div id="notify-container"></div>
    <div id="overlay-header"></div>
    <div id="custom-header"></div>

    <div class="container">
        <div id="header">
            <div id="portalLink">
                <a class="genu" href="http://stackexchange.com" onclick="StackExchange.ready(function(){genuwine.click();});return false;">Stack Exchange</a>
            </div>
            <div id="topbar">
                <div id="hlinks">
                    <span id="hlinks-user">
                  <span class="profile-triangle">&#9662;</span><a href="/users/139010/matt-ball" class="profile-link">Matt Ball</a>&nbsp;<a href="/users/139010/matt-ball?tab=reputation"><span class="reputation-score" title="your reputation; view reputation changes">50,535</span></a><span title="6 gold badges"><span class="badge1"></span><span class="badgecount">6</span></span><span title="35 silver badges"><span class="badge2"></span><span class="badgecount">35</span></span><span title="84 bronze badges"><span class="badge3"></span><span class="badgecount">84</span></span>
 <span class="lsep">|</span>

                  </span>
                  <span id="hlinks-nav">
                   <a href="/tools/flagged" class="mod-flag-indicator supernovabg" title="we have posts flagged for moderator attention, perhaps you can help">47</a> <a href="/review/">tools</a>
 <span class="lsep">|</span>
<a href="/review/suggested-edits" class="mod-flag-indicator hotbg" title="suggested edits pending approval">16</a> 
 <span class="lsep">|</span>

                  </span>
                  <span id="hlinks-custom">
                  <a href="http://chat.stackoverflow.com">chat</a>
 <span class="lsep">|</span>
<a href="http://meta.stackoverflow.com">meta</a>
 <span class="lsep">|</span>
<a href="/faq">faq</a>
                  </span>
                </div>
                <div id="hsearch">
                    <form id="search" action="/search" method="get" autocomplete="off">
                    <div>
                        <input autocomplete="off" name="q" class="textbox" placeholder="search" tabindex="1" type="text" maxlength="140" size="28" value="">
                    </div>
                    </form>
                </div>
            </div>
            <br class="cbt">
            <div id="hlogo">
                <a href="/" >Stack Overflow</a>
            </div>
            <div id="hmenus">
                <div class="nav mainnavs">
                    <ul>
                        <li class="youarehere"><a id="nav-questions" href="/questions">Questions</a></li>
                        <li><a id="nav-tags" href="/tags">Tags</a></li>
                        <li><a id="nav-users" href="/users">Users</a></li>
                        <li><a id="nav-badges" href="/badges">Badges</a></li>
                        <li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li>
                    </ul>
                </div>
                <div class="nav askquestion">
                    <ul>
                        <li>
                            <a id="nav-askquestion"  href="/questions/ask">Ask Question</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        


        <div id="content">
            



<div id="question-header">
    <h1><a href="/questions/7211251/jquery-javascript-div-selection-via-each-gives-htmldivelement-object-rather-th" class="question-hyperlink">Jquery/Javascript div selection via .each() gives HTMLDivElement object rather than Object object. What can be the workaround to hide the div object?</a></h1>
</div>
<div id="mainbar">


<div id="question">

    <table>
    <tr>
    <td class="votecell">
        
<div class="vote">
    <input type="hidden" value="7211251">
    <a class="vote-up-off" title="This question shows research effort; it is useful and clear (click again to undo)">up vote</a>
    <span class="vote-count-post">0</span>
    <a class="vote-down-off" title="This question does not show any research effort; it is unclear or not useful (click again to undo)">down vote</a>

    <a class="star-off" href="#" title="This is a favorite question (click again to undo)">favorite</a>
    <div class="favoritecount"><b></b></div>    

</div>

    </td>

<td class="postcell">
<div>          
    <div class="post-text">
        <p>I have 5 div elements with attribute data-role="content"</p> 
 
<p>I select all of them by </p> 
 
<pre><code>a = $('div[data-role=content]')
</code></pre> 
 
<p>It returns <code>[object HTMLDivElement]</code>.</p> 
 
<p>To hide all the div elements, I iterate through a and hide each element</p> 
 
<pre><code>&lt;script&gt;$.each(a,function (index,value) {
                                 if (value) {
                                    alert(typeof (value)); 
                                value.hide(); 
 
                                        } 
                                    })
</code></pre> 
 
<p></p> 
 
<p>But it returns an error ....</p> 
 
<pre><code>TypeError: Result of expression 'a.hide' [undefined] is not a function
</code></pre> 
 
<p>On the other hand, if I select a single div with the id:</p> 
 
<pre><code>a = $('div[id=content1]')
</code></pre> 
 
<p>it gives me an:</p> 
 
<pre><code> [object Object]
</code></pre> 
 
<p>The hide function <code>a.hide()</code> works in that case.</p> 
 
<p>The question is : how can  I select all the [object Object] elements at once or,
How can I convert [object HTMLDivElement] to [object Object]</p> 

    </div>            
    <div class="post-taglist">
        <a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="/questions/tagged/javascript-objects" class="post-tag" title="show questions tagged 'javascript-objects'" rel="tag">javascript-objects</a> <a href="/questions/tagged/jquery-object" class="post-tag" title="show questions tagged 'jquery-object'" rel="tag">jquery-object</a> 
    </div>
    <table class="fw">
    <tr>
    <td class="vt">
        <div class="post-menu"><a href="/q/7211251/139010" title="short permalink to this question" id="link-post-7211251">link</a><span class="lsep">|</span><a href="/posts/7211251/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a id="close-question-7211251" href="#" title="vote to close or reopen question; when closed, no new answers can be added">close</a><span class="lsep">|</span><a id="flag-post-7211251" href="#" title="flag this post for serious problems or moderator attention">flag</a></div>
<script type="text/javascript">
    StackExchange.using("inlineTagEditing", function () {
        StackExchange.inlineTagEditing.init();
    });
</script>    </td>
                        

    <td class="post-signature owner">
    <div class="user-info"><div class="user-action-time">asked <span title="2011-08-26 22:45:51Z" class="relativetime">16 mins ago</span></div><div class="user-gravatar32"><a href="/users/365374/gaurav-toshniwal"><div class=""><img src="http://www.gravatar.com/avatar/e960b340da56966e529f8b70efcba9d2?s=32&amp;d=identicon&amp;r=PG" alt=""></div></a></div><div class="user-details"><a href="/users/365374/gaurav-toshniwal">Gaurav Toshniwal</a><br><span class="reputation-score" title="reputation score">31</span><span title="4 bronze badges"><span class="badge3"></span><span class="badgecount">4</span></span></div></div>
        <br class="cbt">
        <div class="accept-rate warm" title="this user has accepted an answer for 1 of 4 eligible questions">25% accept rate</div>
    </td>
    </tr>
    </table>
</div>
</td>
    </tr>


<tr>
<td class="votecell"></td>
<td>
    <div id="comments-7211251" class="comments dno">
        <table>
        <tbody>
        
            <tr><td></td><td></td></tr>
        
        </tbody>
    
        <tfoot>
            <tr>
                <td></td>
                <td class="comment-form"><form id="add-comment-7211251"></form></td>
            </tr>
        </tfoot>
    
        </table>
    </div>
    <a id="comments-link-7211251" class="comments-link" title="ask author for clarification about this post">add comment</a>
    
</td>
</tr>    </table>    
</div>



<div id="answers">

    <a name="tab-top"></a>
    <div id="answers-header">
        <div class="subheader answers-subheader">
            <h2>4 Answers</h2>
            <div id="tabs">
                <a href="/questions/7211251/jquery-javascript-div-selection-via-each-gives-htmldivelement-object-rather-th?answertab=active#tab-top" title="Answers with the latest activity first">active</a>
<a href="/questions/7211251/jquery-javascript-div-selection-via-each-gives-htmldivelement-object-rather-th?answertab=oldest#tab-top" title="Answers in the order they were provided">oldest</a>
<a class="youarehere" href="/questions/7211251/jquery-javascript-div-selection-via-each-gives-htmldivelement-object-rather-th?answertab=votes#tab-top" title="Answers with the highest score first">votes</a>

            </div>
        </div>
    </div>


  
    <a name="7211274"></a>
    <div id="answer-7211274" class="answer"  style="background-color:#F4A83D;">
        <table>
        <tr>
        <td class="votecell">
            
<div class="vote">
    <input type="hidden" value="7211274">
    <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
    <span class="vote-count-post">2</span>
    <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>

</div>

        </td>


<td class="answercell">
    <div class="post-text"><p>You're <strong><em>really</em></strong> just looking for this:</p> 
 
<pre><code>var a = $('div[data-role=content]');
a.hide();
</code></pre> 
 
<p>You don't need to explicitly iterate over every element in the jQuery object because <a href="http://api.jquery.com/hide" rel="nofollow"><code>.hide()</code></a> will take care of that for you.</p> 
 
<hr> 
 
<p><em><strong>N.B.</em></strong> <a href="http://api.jquery.com/jQuery.each" rel="nofollow"><code>$.each()</code></a> is for iterating over any array-like object. When you're already working with a jQuery object, though, use <a href="http://api.jquery.com/each" rel="nofollow"><code>.each()</code></a> instead of <code>$.each()</code>.</p> 
 
<p>Also, it looks like you're using an attribute selector to select elements by ID. This is a silly way to select elements, as there's a much simpler &mdash; and potentially <em>much</em> faster &mdash; <a href="http://api.jquery.com/id-selector/" rel="nofollow">ID selector</a>. Here's the swap:</p> 
 
<pre><code>$('div[id=content1]') // Change this
$('div#content1')     // to this
</code></pre> 
 
<p>You can do even better, though, because element IDs must be unique, which means that specifying an ID <em>and</em> an tag name is unnecessarily specific. So,</p> 
 
<pre><code>$('div#content1') // Change this
$('#content1')    // to this
</code></pre> 
</div>
    <table class="fw">
    <tr>
    <td class="vt">
        <div class="post-menu"><a href="/questions/7211251/jquery-javascript-div-selection-via-each-gives-htmldivelement-object-rather-th/7211274#7211274" title="permalink to this answer" id="link-post-7211274">link</a><span class="lsep">|</span><a href="/posts/7211274/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a id="delete-post-7211274" href="#" class="" title="vote to remove this post">delete</a><span class="lsep">|</span><a id="flag-post-7211274" href="#" title="flag this post for serious problems or moderator attention">flag</a></div>
    </td>
    <td align="right" class="post-signature">
<div class="user-info user-hover"><div class="user-action-time">edited <a href="/posts/7211274/revisions" title="show all edits to this post"><span title="2011-08-26 23:00:39Z" class="relativetime">2 mins ago</span></a></div><div class="user-gravatar32"></div><div class="user-details"><br></div></div>    </td>
            

    <td align="right" class="post-signature">   
       

    <div class="user-info user-hover"><div class="user-action-time">answered <span title="2011-08-26 22:49:23Z" class="relativetime">13 mins ago</span></div><div class="user-gravatar32"><a href="/users/139010/matt-ball"><div class=""><img src="http://www.gravatar.com/avatar/0df2f3c2d3b43605889eb90231fb6884?s=32&amp;d=identicon&amp;r=PG" alt=""></div></a></div><div class="user-details"><a href="/users/139010/matt-ball">Matt Ball</a><br><span class="reputation-score" title="reputation score 50535">50.5k</span><span title="6 gold badges"><span class="badge1"></span><span class="badgecount">6</span></span><span title="35 silver badges"><span class="badge2"></span><span class="badgecount">35</span></span><span title="84 bronze badges"><span class="badge3"></span><span class="badgecount">84</span></span></div></div>
    </td>
    </tr>
    </table>
</td>        </tr>


<tr>
<td class="votecell"></td>
<td>
    <div id="comments-7211274" class="comments dno">
        <table>
        <tbody>
        
            <tr><td></td><td></td></tr>
        
        </tbody>
    
        <tfoot>
            <tr>
                <td></td>
                <td class="comment-form"><form id="add-comment-7211274"></form></td>
            </tr>
        </tfoot>
    
        </table>
    </div>
    <a id="comments-link-7211274" class="comments-link" title="ask author for clarification about this post">add comment</a>
    
</td>
</tr>    </table>
</div>

  
    <a name="7211295"></a>
    <div id="answer-7211295" class="answer" >
        <table>
        <tr>
        <td class="votecell">
            
<div class="vote">
    <input type="hidden" value="7211295">
    <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
    <span class="vote-count-post">0</span>
    <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>

</div>

        </td>


<td class="answercell">
    <div class="post-text"><p>The value passed to <code>each</code> is the actual DIV element itself, not a jQuery wrapped instance of the DIV. DIV elements don't have a hide method. You can use @Matt's suggestion which is the correct and shortest way since the <code>.hide()</code> call will be applied to all members of the <code>$(...)</code> result set. Or turn your value into a real jQuery selector with <code>$(value).hide()</code>.</p> 
</div>
    <table class="fw">
    <tr>
    <td class="vt">
        <div class="post-menu"><a href="/questions/7211251/jquery-javascript-div-selection-via-each-gives-htmldivelement-object-rather-th/7211295#7211295" title="permalink to this answer" id="link-post-7211295">link</a><span class="lsep">|</span><a href="/posts/7211295/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a id="flag-post-7211295" href="#" title="flag this post for serious problems or moderator attention">flag</a></div>
    </td>
            

    <td align="right" class="post-signature">   
       

    <div class="user-info user-hover"><div class="user-action-time">answered <span title="2011-08-26 22:52:51Z" class="relativetime">9 mins ago</span></div><div class="user-gravatar32"><a href="/users/76456/paul-alexander"><div class=""><img src="http://www.gravatar.com/avatar/7094bef129a85ebc3ad19703b584e934?s=32&amp;d=identicon&amp;r=PG" alt=""></div></a></div><div class="user-details"><a href="/users/76456/paul-alexander">Paul Alexander</a><br><span class="reputation-score" title="reputation score">9,607</span><span title="10 silver badges"><span class="badge2"></span><span class="badgecount">10</span></span><span title="48 bronze badges"><span class="badge3"></span><span class="badgecount">48</span></span></div></div>
    </td>
    </tr>
    </table>
</td>        </tr>


<tr>
<td class="votecell"></td>
<td>
    <div id="comments-7211295" class="comments dno">
        <table>
        <tbody>
        
            <tr><td></td><td></td></tr>
        
        </tbody>
    
        <tfoot>
            <tr>
                <td></td>
                <td class="comment-form"><form id="add-comment-7211295"></form></td>
            </tr>
        </tfoot>
    
        </table>
    </div>
    <a id="comments-link-7211295" class="comments-link" title="ask author for clarification about this post">add comment</a>
    
</td>
</tr>    </table>
</div>

  
    <a name="7211261"></a>
    <div id="answer-7211261" class="answer" >
        <table>
        <tr>
        <td class="votecell">
            
<div class="vote">
    <input type="hidden" value="7211261">
    <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
    <span class="vote-count-post">0</span>
    <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>

</div>

        </td>


<td class="answercell">
    <div class="post-text"><p>You're looking for</p> 
 
<pre><code>a.each(function(index, item){
 
    $(this).hide;
 
});
</code></pre> 
 
<p>That is the each that foreaches through a jquery object and actually makes "this" available.</p> 
</div>
    <table class="fw">
    <tr>
    <td class="vt">
        <div class="post-menu"><a href="/questions/7211251/jquery-javascript-div-selection-via-each-gives-htmldivelement-object-rather-th/7211261#7211261" title="permalink to this answer" id="link-post-7211261">link</a><span class="lsep">|</span><a href="/posts/7211261/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a id="flag-post-7211261" href="#" title="flag this post for serious problems or moderator attention">flag</a></div>
    </td>
            

    <td align="right" class="post-signature">   
       

    <div class="user-info"><div class="user-action-time">answered <span title="2011-08-26 22:47:54Z" class="relativetime">14 mins ago</span></div><div class="user-gravatar32"><a href="/users/719367/matt"><div class=""><img src="http://www.gravatar.com/avatar/9def764d0d64b6c94667ac3601b022d9?s=32&amp;d=identicon&amp;r=PG" alt=""></div></a></div><div class="user-details"><a href="/users/719367/matt">Matt</a><br><span class="reputation-score" title="reputation score">411</span><span title="5 bronze badges"><span class="badge3"></span><span class="badgecount">5</span></span></div></div>
    </td>
    </tr>
    </table>
</td>        </tr>


<tr>
<td class="votecell"></td>
<td>
    <div id="comments-7211261" class="comments dno">
        <table>
        <tbody>
        
            <tr><td></td><td></td></tr>
        
        </tbody>
    
        <tfoot>
            <tr>
                <td></td>
                <td class="comment-form"><form id="add-comment-7211261"></form></td>
            </tr>
        </tfoot>
    
        </table>
    </div>
    <a id="comments-link-7211261" class="comments-link" title="ask author for clarification about this post">add comment</a>
    
</td>
</tr>    </table>
</div>

  
    <a name="7211273"></a>
    <div id="answer-7211273" class="answer" >
        <table>
        <tr>
        <td class="votecell">
            
<div class="vote">
    <input type="hidden" value="7211273">
    <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
    <span class="vote-count-post">-2</span>
    <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>

</div>

        </td>


<td class="answercell">
    <div class="post-text"><p>But the easiest way to hide each element is to call <code>hide</code> directly on the wrapped set:</p> 
 
<pre><code>a.hide();
</code></pre> 
 
<p>If you really want to use the <code>each</code> function, you can access the underlying object with <code>$(this)</code></p> 
 
<pre><code>&lt;script&gt;$.each(a,function (index,value) {
                                 if (value) {
                                    alert(typeof (value)); 
                                $(this).hide(); 
 
                                        } 
                                    })
</code></pre> 
 
<p>It will also work if you wrap the <code>value</code> parameter in a jQuery.</p> 
 
<pre><code>&lt;script&gt;$.each(a,function (index,value) {
                                 if (value) {
                                    alert(typeof (value)); 
                                $(value).hide(); 
 
                                        } 
                                    })
</code></pre> 
</div>
    <table class="fw">
    <tr>
    <td class="vt">
        <div class="post-menu"><a href="/questions/7211251/jquery-javascript-div-selection-via-each-gives-htmldivelement-object-rather-th/7211273#7211273" title="permalink to this answer" id="link-post-7211273">link</a><span class="lsep">|</span><a href="/posts/7211273/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a id="delete-post-7211273" href="#" class="" title="vote to remove this post">delete</a><span class="lsep">|</span><a id="flag-post-7211273" href="#" title="flag this post for serious problems or moderator attention">flag</a></div>
    </td>
    <td align="right" class="post-signature">
<div class="user-info user-hover"><div class="user-action-time">edited <a href="/posts/7211273/revisions" title="show all edits to this post"><span title="2011-08-26 23:02:19Z" class="relativetime">26 secs ago</span></a></div><div class="user-gravatar32"></div><div class="user-details"><br></div></div>    </td>
            

    <td align="right" class="post-signature">   
       

    <div class="user-info user-hover"><div class="user-action-time">answered <span title="2011-08-26 22:49:22Z" class="relativetime">13 mins ago</span></div><div class="user-gravatar32"><a href="/users/25216/andrew-shepherd"><div class=""><img src="http://www.gravatar.com/avatar/cbb750ce3bfb44081ae590348b4eefb1?s=32&amp;d=identicon&amp;r=PG" alt=""></div></a></div><div class="user-details"><a href="/users/25216/andrew-shepherd">Andrew Shepherd</a><br><span class="reputation-score" title="reputation score">7,771</span><span title="1 gold badge"><span class="badge1"></span><span class="badgecount">1</span></span><span title="17 silver badges"><span class="badge2"></span><span class="badgecount">17</span></span><span title="48 bronze badges"><span class="badge3"></span><span class="badgecount">48</span></span></div></div>
    </td>
    </tr>
    </table>
</td>        </tr>


<tr>
<td class="votecell"></td>
<td>
    <div id="comments-7211273" class="comments">
        <table>
        <tbody>
                    
    <tr id="comment-8664933" class="comment">
        <td class="comment-actions"><table><tbody><tr> 
<td class="comment-score"> 
<span title="number of 'great comment' votes received" class="cool">1</span> 
</td> 
<td> 
&nbsp;
</td></tr> 
</tbody></table></td>
        <td class="comment-text"><div><span class="comment-copy">Unbelievably sloppy for someone with almost 8k rep. -1</span> &ndash;&nbsp;<a href="/users/139010/matt-ball" title="50535 reputation" class="comment-user">Matt Ball</a> <span class="comment-date"><span title="2011-08-26 22:49:53Z">12 mins ago</span></span>&nbsp;<span class="comment-delete delete-tag" title="delete this comment"></span></div></td>
    </tr>

        </tbody>
    
        <tfoot>
            <tr>
                <td></td>
                <td class="comment-form"><form id="add-comment-7211273"></form></td>
            </tr>
        </tfoot>
    
        </table>
    </div>
    <a id="comments-link-7211273" class="comments-link" title="ask author for clarification about this post">add comment</a>
    
</td>
</tr>    </table>
</div>
    <a name='new-answer'></a>
    <form id="post-form" action="/questions/7211251/answer/submit" method="post"  class="dno post-form">
        <h2 class="space">Your Answer</h2>
       

<script type="text/javascript">
    StackExchange.ready(function() {
        initTagRenderer("".split(" "), "".split(" "));

              
            prepareEditor({
                
                heartbeatType: 'answer',
                bindNavPrevention: true,
                postfix: "",
                onDemand: false                
            });
            
    });  
</script>


<div id="post-editor" class="post-editor">  

    
    <div class="wmd-container">
        <div id="wmd-button-bar" class="wmd-button-bar"></div>
        <textarea id="wmd-input" class="wmd-input" name="post-text" cols="92" rows="15" tabindex="101"></textarea>
    </div>

    <div class="fl" style="margin-top: 8px; height:24px;">&nbsp;</div>
    <div id="draft-saved" class="draft-saved community-option fl" style="margin-top: 8px; height:24px; display:none;">draft saved</div>

    <div class="community-option">
        <input id="communitymode" name="communitymode" type="checkbox" >
        <label for="communitymode" title="Marking an answer community wiki encourages others to edit it by lowering the reputation barrier required to edit. However, you will not gain any upvote reputation from it. This cannot be undone.">community wiki</label>
    </div>


    <div id="wmd-preview" class="wmd-preview"></div>
    <div></div>
    <div class="edit-block">
        <input id="fkey" name="fkey" type="hidden" value="7bd1e440169aed46608af477ea9c9629">
        <input id="author" name="author" type="text">
    </div>
</div>           
        <div class="form-submit cbt"><input id="submit-button" type="submit" value="Post Your Answer" tabindex="110"></div>
    </form>
        <div id="show-editor-button" class="form-submit" style="margin-bottom:8px">
            <input type="button" value="Add Another Answer" />
        </div>
        <script type="text/javascript">
            StackExchange.ready(function () {
                var cp1 = "Are you sure you want to add another answer?\n\nYou could use the edit link to refine and improve your existing answer, instead.";
                $("#show-editor-button input").click(function () {
                    if (confirm(cp1)) {
                        $("#show-editor-button").hide();
                        $("#post-form").removeClass("dno");
 
                            StackExchange.editor.finallyInit();
                        
                    }
                });
            });
        </script>        
<script type="text/javascript">
    StackExchange.using("inlineEditing", function () {
        StackExchange.inlineEditing.init();
    });
</script>

    <h2 class="bottom-notice">
        Not the answer you're looking for? 
        Browse other questions tagged <a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="/questions/tagged/javascript-objects" class="post-tag" title="show questions tagged 'javascript-objects'" rel="tag">javascript-objects</a> <a href="/questions/tagged/jquery-object" class="post-tag" title="show questions tagged 'jquery-object'" rel="tag">jquery-object</a> 
                or <a href="/questions/ask">ask your own question</a>.
    </h2>
</div>
</div>
<div id="sidebar">
    <div class="module">
        <p class="label-key">tagged</p>
        <div class="tagged"><a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged 'javascript'" rel="tag">javascript</a>&nbsp;<span class="item-multiplier">&times;&nbsp;125020</span><br> 
<a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged 'jquery'" rel="tag">jquery</a>&nbsp;<span class="item-multiplier">&times;&nbsp;108094</span><br> 
<a href="/questions/tagged/javascript-objects" class="post-tag" title="show questions tagged 'javascript-objects'" rel="tag">javascript-objects</a>&nbsp;<span class="item-multiplier">&times;&nbsp;102</span><br> 
<a href="/questions/tagged/jquery-object" class="post-tag" title="show questions tagged 'jquery-object'" rel="tag">jquery-object</a>&nbsp;<span class="item-multiplier">&times;&nbsp;7</span><br> 
</div>
        <table id="qinfo">
            <tr>
                <td><p class="label-key">asked</p></td>
                <td style="padding-left:10px"><p class="label-key" title="2011-08-26 22:45:51Z"><b>today</b></p></td>
            </tr>
            <tr>
                <td><p class="label-key">viewed</p></td>

                <td style="padding-left:10px"><p class="label-key"><b>19 times</b></p></td>
            </tr>
            <tr>
                <td><p class="label-key">active</p></td>
                <td style="padding-left:10px"><p class="label-key"><b><a href="?lastactivity" class="lastactivity-link" title="2011-08-26 23:02:19Z">today</a></b></p></td>
            </tr>
        </table>
    </div>
    
        <script type="text/javascript">
            var scriptSrc = "http://engine2.adzerk.net/z/8277/adzerk2_2_17_45?keywords=javascript,jquery,javascript-objects,jquery-object,x-user-registered,x-user-highrep";
            if (document.referrer) {
                if (/\?/.test(scriptSrc))
                    scriptSrc += "&";
                else
                    scriptSrc += "?";
                scriptSrc += "xReferrer=" + document.referrer;
            }
            var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = scriptSrc; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);
        </script>
    
    <div class="everyonelovesstackoverflow" id="adzerk2">
    </div>

    
    <div>
        <script type="text/javascript">
            (function(){var q="http://careers.stackoverflow.com/ad/js",d=location.hash.indexOf("#large")>-1,a=location.hash.indexOf("#ninjas")>-1,c=location.hash.indexOf("#tagme")>-1,b,f=100,h="#adzerk2",e="#adzerk1",i="#herebeninjas";(function(){var b="min-height:220px;margin:15px 0",c=$("<div>").addClass("hireme").attr("style",b),a=$("<div>").html(c);document.write(a.html())})();$(function(){setTimeout(r,2e3);b=setTimeout(g,f)});var g=function(){clearTimeout(b);if(m()&&!k()){b=setTimeout(g,f);return}a=a||n();a&&$(e).css("height",$(e).outerHeight()).attr("id","stop-adzerk");if(l()&&!j()){b=setTimeout(g,f);return}d=d||o();p()},r=function(){clearTimeout(b);var a=$("div.hireme, "+i);a.each(function(){var a=$(this),d=a.html().replace(/\s+/g,"").length==0;if(d){var c=a,b=a.parents(".everyonelovesstackoverflow").first();if(b.length>0)c=b;c.remove()}})},l=function(){return $(h).length>0},j=function(){var a=$(h);return a.length==0?false:a.html().replace(/\s+/g,"").length>0},o=function(){return $("#careersadsdoublehigh").length>0},m=function(){return $(e).length>0},k=function(){var a=$(e);return a.length==0?false:a.html().replace(/\s+/g,"").length>0},n=function(){return $(i).length>0},p=function(){$.ajax({url:s(),dataType:"script",cache:true})},s=function(){var b=q+(d||a||c?"?":"");if(d)b+="large="+d.toString()+(a||c?"&":"");if(a)b+="banner="+a.toString()+(c?"&":"");if(c)b+="tagged="+c.toString();return b}})();
        </script>
    </div>

            <div style="margin-bottom: 10px;">
            
<style type="text/css">
#newsletter-ad {
    width: 190px;
    height: 250px;
    overflow: hidden;
    background: url('http://sstatic.net/stackoverflow/img//newsletter-ad.png');
    padding: 0 15px 0 15px;
}
#newsletter-ad-header {
    margin-top: 60px;
}
#newsletter-ad ul {
    margin: 1em 0 1em 1.5em;
}
#newsletter-ad ul li {
    margin-bottom: 5px;
}
#newsletter-signup-container {
    text-align: center;
}
#newsletter-preview-container {
    margin-top: 10px;
    text-align: center;
}
#newsletter-email-input {
    width: 200px;
}
</style>

<script>
    StackExchange.ready(function () {
        StackExchange.newsletterAd.init();
    });
</script>

<div id="newsletter-ad">
    <p id="newsletter-ad-header">Get the <strong>weekly newsletter!</strong></p>
    <ul>
        <li>Top questions and answers</li>
        <li>Important announcements</li>
        <li>Unanswered questions</li>
    </ul>
    <div id="newsletter-signup-container"><input id="newsletter-signup" type="button" value="Sign up for the newsletter" /></div>
    <p id="newsletter-preview-container">see an <a href="http://stackexchange.com/newsletters/newsletter?site=stackoverflow.com" id="newsletter-preview">example newsletter</a></p>
</div>

        </div>
  

    <div class="module">
    <h4 id="h-related">Related</h4>
    <div class="related">
    <div class="spacer">
<a href="/questions/1682491/javascript-mechanism-for-holding-onto-a-value-from-a-user-action" class="question-hyperlink">JavaScript mechanism for holding onto a value from a user action</a>
</div>
<div class="spacer">
<a href="/questions/2779855/js-object-itteration-fails" class="question-hyperlink">JS: Object itteration fails</a>
</div>
<div class="spacer">
<a href="/questions/3001045/jquery-each-returns-dom-element-and-not-a-jquery-object" class="question-hyperlink">jQuery .each() returns DOM element and not a jQuery object</a>
</div>
<div class="spacer">
<a href="/questions/3122537/accessing-javascript-object-reference-from-within-member-method" class="question-hyperlink">Accessing javascript object reference from within member method</a>
</div>
<div class="spacer">
<a href="/questions/3176962/jquery-object-equality" class="question-hyperlink">jQuery object equality</a>
</div>
<div class="spacer">
<a href="/questions/3801907/deleting-javascript-object-instances" class="question-hyperlink">Deleting javascript object instances</a>
</div>
<div class="spacer">
<a href="/questions/3944453/jquery-datalink-not-working-with-object-methods" class="question-hyperlink">jQuery Datalink not working with object methods</a>
</div>
<div class="spacer">
<a href="/questions/4064217/dynamicly-add-values-to-and-sort-javascript-object" class="question-hyperlink">Dynamicly add values to and sort Javascript Object</a>
</div>
<div class="spacer">
<a href="/questions/4407990/reading-a-javascript-object" class="question-hyperlink">Reading a Javascript Object</a>
</div>
<div class="spacer">
<a href="/questions/4409264/reading-a-javascript-object" class="question-hyperlink">Reading a Javascript Object</a>
</div>
<div class="spacer">
<a href="/questions/4800231/iterate-through-nested-javascript-objects-dirty" class="question-hyperlink">Iterate Through Nested JavaScript Objects - Dirty?</a>
</div>
<div class="spacer">
<a href="/questions/5147679/jquery-access-object-value" class="question-hyperlink">jQuery Access Object Value</a>
</div>
<div class="spacer">
<a href="/questions/5486008/adding-methods-to-a-javascript-object" class="question-hyperlink">Adding methods to a JavaScript object</a>
</div>
<div class="spacer">
<a href="/questions/5505085/flatten-a-javascript-object-to-pass-as-querystring" class="question-hyperlink">Flatten a javascript object to pass as querystring</a>
</div>
<div class="spacer">
<a href="/questions/5603117/jquery-create-object-from-form-fields" class="question-hyperlink">jQuery create object from form fields</a>
</div>
<div class="spacer">
<a href="/questions/6303661/get-find-javascript-object-by-its-parameter" class="question-hyperlink">Get/find javascript object by its parameter</a>
</div>
<div class="spacer">
<a href="/questions/6440885/better-understanding-javascript-by-examining-jquery-elements" class="question-hyperlink">Better Understanding Javascript by Examining jQuery Elements</a>
</div>
<div class="spacer">
<a href="/questions/6504601/is-there-a-shorter-way-to-define-an-object-structure-with-variable-keys" class="question-hyperlink">Is there a shorter way to define an object structure with variable keys?</a>
</div>
<div class="spacer">
<a href="/questions/6570617/global-variables-for-nested-object-classes-in-jquery" class="question-hyperlink">Global variables for nested object classes in jQuery</a>
</div>
<div class="spacer">
<a href="/questions/6592417/how-to-generate-nested-json-object-from-nested-list-with-javascript-jquery" class="question-hyperlink">How to generate nested json object from nested list with javascript/jquery</a>
</div>
<div class="spacer">
<a href="/questions/6599071/array-like-objects-in-javascript" class="question-hyperlink">Array Like Objects in Javascript</a>
</div>
<div class="spacer">
<a href="/questions/6841411/how-do-i-call-this-function-from-within-jquery" class="question-hyperlink">How do I call this function from within JQuery?</a>
</div>
<div class="spacer">
<a href="/questions/6969296/javascript-value-in-object-returns-undefined" class="question-hyperlink">Javascript Value in Object returns Undefined</a>
</div>
<div class="spacer">
<a href="/questions/7065137/referenceerror-from-a-javascript-function-that-is-defined-correctly" class="question-hyperlink">ReferenceError from a JavaScript function that is defined correctly?</a>
</div>
<div class="spacer">
<a href="/questions/7207738/converting-jquery-object-to-regular-js-within-a-function" class="question-hyperlink">converting jquery object to regular js within a function</a>
</div>

    </div>
    </div>
</div>

<div id="feed-link">
    <div id="feed-link-text"><a href="/feeds/question/7211251" title="feed of this question and its answers"><span class="feed-icon"></span>question feed</a></div>
</div>
<script type="text/javascript" src="/posts/7211251/ivc/5332"></script>
<noscript>
    <div><img src="/posts/7211251/ivc/5332" class="dno" alt=""></div>
</noscript>
<div style="display:none" id="prettify-lang">default</div>
        </div>
    </div>
    <div id="footer">
        <div class="footerwrap">
            <div id="footer-menu">
                <a href="/about">about</a> |
                <a href="/faq">faq</a> |
                <a href="http://blog.stackexchange.com">blog</a> |
                    <a href="http://chat.stackoverflow.com">chat</a> |
                <a href="http://data.stackexchange.com">data</a> |
                <a href="http://blog.stackoverflow.com/category/podcasts/">podcast</a> |
                <a href="http://shop.stackexchange.com/">shop</a> |
                <a href="http://stackexchange.com/legal">legal</a> |
                <a href="http://engine.adzerk.net/redirect/0/2776/2751/0/4de3c60f719c4dfcb1a57531c7050090/0">advertising info</a> |

                <a onclick="StackExchange.switchMobile('on', '/questions/7211251/jquery-javascript-div-selection-via-each-gives-htmldivelement-object-rather-th/7211274')">mobile</a> |

                <b><a href="mailto:team@stackoverflow.com">contact us</a></b>
                  | <b><a href="http://meta.stackoverflow.com">feedback</a></b>
                <div id="footer-sites">
                    
                        <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://stackoverflow.com">stackoverflow.com</a>&nbsp; 
                        <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://stackapps.com">api/apps</a>&nbsp; 
                        <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://careers.stackoverflow.com">careers</a>&nbsp; 
                        <span style="color:#E8272C;font-size:140%">&#9632;</span>&nbsp;<a href="http://serverfault.com">serverfault.com</a>&nbsp; 
                        <span style="color:#00AFEF;font-size:140%">&#9632;</span>&nbsp;<a href="http://superuser.com">superuser.com</a>&nbsp; 
                        <span style="color:#969696;font-size:140%">&#9632;</span>&nbsp;<a href="http://meta.stackoverflow.com">meta</a>&nbsp; 
                        <span style="color:#46937D;font-size:140%">&#9632;</span>&nbsp;<a href="http://area51.stackexchange.com">area&nbsp;51</a>&nbsp; 
                        <span style="color:#C0D0DC;font-size:140%">&#9632;</span>&nbsp;<a href="http://webapps.stackexchange.com">webapps</a>&nbsp; 
                        <span style="color:#000000;font-size:140%">&#9632;</span>&nbsp;<a href="http://gaming.stackexchange.com">gaming</a>&nbsp; 
                        <span style="color:#dd4814;font-size:140%">&#9632;</span>&nbsp;<a href="http://askubuntu.com">ubuntu</a>&nbsp; 
                        <span style="color:#9ce4fe;font-size:140%">&#9632;</span>&nbsp;<a href="http://webmasters.stackexchange.com">webmasters</a>&nbsp; 
                        <span style="color:#cf4d3f;font-size:140%">&#9632;</span>&nbsp;<a href="http://cooking.stackexchange.com">cooking</a>&nbsp; 
                        <span style="color:#f4f28d;font-size:140%">&#9632;</span>&nbsp;<a href="http://gamedev.stackexchange.com">game development</a>&nbsp; 
                        <span style="color:#0f3559;font-size:140%">&#9632;</span>&nbsp;<a href="http://math.stackexchange.com">math</a>&nbsp; 
                        <span style="color:#f2f2f2;font-size:140%">&#9632;</span>&nbsp;<a href="http://photo.stackexchange.com">photography</a>&nbsp; 
                        <span style="color:#037187;font-size:140%">&#9632;</span>&nbsp;<a href="http://stats.stackexchange.com">stats</a>&nbsp; 
                        <span style="color:#f1e7cc;font-size:140%">&#9632;</span>&nbsp;<a href="http://tex.stackexchange.com">tex</a>&nbsp; 
                        <span style="color:#e1cdae;font-size:140%">&#9632;</span>&nbsp;<a href="http://english.stackexchange.com">english</a>&nbsp; 
                        <span style="color:#a2d9f6;font-size:140%">&#9632;</span>&nbsp;<a href="http://cstheory.stackexchange.com">theoretical cs</a>&nbsp; 
                        <span style="color:#1b3e6c;font-size:140%">&#9632;</span>&nbsp;<a href="http://programmers.stackexchange.com">programmers</a>&nbsp; 
                        <span style="color:#293a5d;font-size:140%">&#9632;</span>&nbsp;<a href="http://unix.stackexchange.com">unix</a>&nbsp;
                        <span style="color:#bec0cb;font-size:140%">&#9632;</span>&nbsp;<a href="http://apple.stackexchange.com">apple</a>&nbsp;
                        <span style="color:#939185;font-size:140%">&#9632;</span>&nbsp;<a href="http://wordpress.stackexchange.com">wordpress</a>&nbsp;
                        <span style="color:#b5cda4;font-size:140%">&#9632;</span>&nbsp;<a href="http://physics.stackexchange.com">physics</a>&nbsp;
                        <span style="color:#4176ab;font-size:140%">&#9632;</span>&nbsp;<a href="http://diy.stackexchange.com">home&nbsp;improvement</a>&nbsp;
                        <span style="color:#d1d8d7;font-size:140%">&#9632;</span>&nbsp;<a href="http://gis.stackexchange.com">gis</a>&nbsp;
                        <span style="color:#e5e2d3;font-size:140%">&#9632;</span>&nbsp;<a href="http://electronics.stackexchange.com">electronics</a>&nbsp;
                        <span style="color:#a4c639;font-size:140%">&#9632;</span>&nbsp;<a href="http://android.stackexchange.com">android</a>&nbsp;
                        <span style="color:#2e4e60;font-size:140%">&#9632;</span>&nbsp;<a href="http://security.stackexchange.com">security</a>&nbsp;
                        <span style="color:#45bcb5;font-size:140%">&#9632;</span>&nbsp;<a href="http://bicycles.stackexchange.com">bicycles</a>&nbsp;
                        <span style="color:#00adee;font-size:140%">&#9632;</span>&nbsp;<a href="http://dba.stackexchange.com">dba</a>&nbsp;
                </div>
            </div>
            <div id="footer-flair">
                <a class="peer1" href="http://www.peer1.com/stackoverflow"></a>  
                    <a href="http://creativecommons.org/licenses/by-sa/3.0/" class="cc-wiki-link"></a>
                <div id="svnrev">rev 2011.8.26.2</div>
            </div>
            <div id="copyright">
                site design / logo &copy; 2011 stack exchange inc; 
                user contributions licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/" rel="license">cc-wiki</a> with <a href="http://blog.stackoverflow.com/2009/06/attribution-required/" rel="license">attribution required</a>
            </div>
            

        </div>
    </div>

Test runner

Ready to run.

Testing in
TestOps/sec
Tag name and ID attribute selector
$('div[id="show-editor-button"]');
ready
Tag name and ID selector
$('div#show-editor-button');
ready
Just ID selector
$('#show-editor-button');
ready
Native Selector
document.getElementById("show-editor-button");
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Matt Ball on
  • Revision 2: published by Serj on