Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>It sounds like you want to have disconnected DOM elements and search through them. You can do that quite easily:</p> <pre><code>var elements = $('&lt;div&gt;&lt;div class="one"&gt;one&lt;/div&gt;&lt;div class="two"&gt;two&lt;/div&gt;&lt;/div&gt;'); var divOne = elements.find('.one'); </code></pre> <p>There, I've created a structure with a single top-level <code>div</code> which contains all of the others, and wrapped a jQuery instance around it. The elements are not in the DOM, they're completely disconnected from it. Then I can use jQuery methods like <code>find</code> and such to extract the bits I want.</p> <p>If you wanted to put an extracted bit actually on the page somewhere, you'd probably want to <code>clone</code> it:</p> <pre><code>// Put "one" on the page elements.find(".one").clone().appendTo(document.body); </code></pre> <hr> <p>But looking at your comment to Juhana on the question:</p> <blockquote> <p>Juhana: Imagine a user has a micropost with 4000 comments for it. Every time the user entered the page with that micropost on it all 4000 comments would be loaded from the database then hidden. Even if the user didn't click the show all link. That's not something I'd like to do. Imagine 1000 users viewing that micropost. That would mean 4000 comments being loaded then hidden 1000 times whether the user clicked show all or not.</p> </blockquote> <p>...I wouldn't load the additional comments <em>at all</em> (not in the HTML, and not in the script). Instead, I'd only load the comments I was going to show, and then have the "more" link fire off an ajax request for the rest of them if and when the user clicked it. You don't gain much (if anything) from just moving them from the HTML into the script.</p> <p>Here's an example - <a href="http://jsbin.com/onafam" rel="nofollow">live example</a> | <a href="http://jsbin.com/onafam/edit" rel="nofollow">source</a>:</p> <p>HTML:</p> <pre><code>&lt;div id="commentsContainer"&gt; &lt;div class="comment"&gt;Comment 1&lt;/div&gt; &lt;div class="comment"&gt;Comment 2&lt;/div&gt; &lt;div class="comment"&gt;Comment 3&lt;/div&gt; &lt;div class="comment"&gt;Comment 4&lt;/div&gt; &lt;div class="comment"&gt;Comment 5&lt;/div&gt; &lt;div class="comment"&gt;Comment 6&lt;/div&gt; &lt;div class="comment"&gt;Comment 7&lt;/div&gt; &lt;div class="comment"&gt;Comment 8&lt;/div&gt; &lt;div class="comment"&gt;Comment 9&lt;/div&gt; &lt;div class="comment"&gt;Comment 10&lt;/div&gt; &lt;div&gt;&lt;a href="fallback.php" id="moreComments"&gt;more&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>JavaScript:</p> <pre><code>jQuery(function($) { $("#moreComments").click(function(event) { var $this = $(this), moreDiv, container; event.preventDefault(); moreDiv = $this.parent(); container = moreDiv.parent(); $this.replaceWith("&lt;em&gt;Loading...&lt;/em&gt;"); $.ajax({ method: 'get', url: 'http://jsbin.com/ijarov', dataType: 'html', success: function(data) { moreDiv.remove(); container.append(data); } }); }); function display(msg) { $("&lt;p&gt;").html(msg).appendTo(document.body); } }); </code></pre> <p>What's returned by the ajax call:</p> <pre><code>&lt;div class="comment"&gt;Comment 11&lt;/div&gt; &lt;div class="comment"&gt;Comment 12&lt;/div&gt; &lt;div class="comment"&gt;Comment 13&lt;/div&gt; &lt;div class="comment"&gt;Comment 14&lt;/div&gt; &lt;div class="comment"&gt;Comment 15&lt;/div&gt; &lt;div class="comment"&gt;Comment 16&lt;/div&gt; &lt;div class="comment"&gt;Comment 17&lt;/div&gt; &lt;div class="comment"&gt;Comment 18&lt;/div&gt; &lt;div class="comment"&gt;Comment 19&lt;/div&gt; &lt;div class="comment"&gt;Comment 20&lt;/div&gt; </code></pre> <hr> <p>Re your comment below:</p> <blockquote> <p>Say you don't want to append "data" but access the classes in that file. Is that possible?</p> </blockquote> <p>I don't know what you mean by <em>"...access the classes..."</em>, but if you mean interact with the elements you got back without appending them, you just instantiate them, much as I did at the top of this answer with a literal string. For instance, do this in the <code>ajax</code> success handler:</p> <pre><code>var elements = $(data); </code></pre> <p>Here's the above example with different return data (a mix of <code>div</code> elements, some with the class <code>comment</code> and some with the class <code>other</code>), where I look at the data before appending it, and then only append the comments, not the "other"s: <a href="http://jsbin.com/onafam/3" rel="nofollow">Live example</a> | <a href="http://jsbin.com/onafam/3/edit" rel="nofollow">source</a></p> <p>HTML:</p> <pre><code>&lt;div id="commentsContainer"&gt; &lt;div class="comment"&gt;Comment 1&lt;/div&gt; &lt;div class="comment"&gt;Comment 2&lt;/div&gt; &lt;div class="comment"&gt;Comment 3&lt;/div&gt; &lt;div class="comment"&gt;Comment 4&lt;/div&gt; &lt;div class="comment"&gt;Comment 5&lt;/div&gt; &lt;div class="comment"&gt;Comment 6&lt;/div&gt; &lt;div class="comment"&gt;Comment 7&lt;/div&gt; &lt;div class="comment"&gt;Comment 8&lt;/div&gt; &lt;div class="comment"&gt;Comment 9&lt;/div&gt; &lt;div class="comment"&gt;Comment 10&lt;/div&gt; &lt;div&gt;&lt;a href="fallback.php" id="moreComments"&gt;more&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;hr&gt; </code></pre> <p>JavaScript <em>(only change is in the <code>success</code> function)</em>:</p> <pre><code>jQuery(function($) { $("#moreComments").click(function(event) { var $this = $(this), moreDiv, container; event.preventDefault(); moreDiv = $this.parent(); container = moreDiv.parent(); $this.replaceWith("&lt;em&gt;Loading...&lt;/em&gt;"); $.ajax({ method: 'get', url: 'http://jsbin.com/ijarov/2', dataType: 'html', success: function(data) { var elements = $(data); moreDiv.remove(); display("Number of &lt;code&gt;.comment&lt;/code&gt; elements: "+ elements.filter('.comment').length); display("Number of &lt;code&gt;.other&lt;/code&gt; elements: "+ elements.filter('.other').length); display("Appending only the &lt;code&gt;.comment&lt;/code&gt; ones."); elements.filter('.comment').appendTo(container); } }); }); function display(msg) { $("&lt;p&gt;").html(msg).appendTo(document.body); } }); </code></pre> <p>Data returned by the <code>ajax</code> call:</p> <pre><code>&lt;div class="comment"&gt;Comment 11&lt;/div&gt; &lt;div class="other"&gt;Other 11&lt;/div&gt; &lt;div class="comment"&gt;Comment 12&lt;/div&gt; &lt;div class="other"&gt;Other 12&lt;/div&gt; &lt;div class="comment"&gt;Comment 13&lt;/div&gt; &lt;div class="comment"&gt;Comment 14&lt;/div&gt; &lt;div class="comment"&gt;Comment 15&lt;/div&gt; &lt;div class="comment"&gt;Comment 16&lt;/div&gt; &lt;div class="comment"&gt;Comment 17&lt;/div&gt; &lt;div class="comment"&gt;Comment 18&lt;/div&gt; &lt;div class="comment"&gt;Comment 19&lt;/div&gt; &lt;div class="comment"&gt;Comment 20&lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload