Databases
StackOverflow2013
Postsdbo
POCan a set of classes be stored in memory, so I can do things to them before I display them on a page? (JQuery)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan a set of classes be stored in memory, so I can do things to them before I display them on a page? (JQuery)
    text
    copied!<p>I'm implementing this: <a href="http://jsfiddle.net/xkfqN/85/" rel="nofollow">http://jsfiddle.net/xkfqN/85/</a></p> <p><strong>html:</strong></p> <pre><code>&lt;div id="posts"&gt; &lt;div class="more"&gt;Show More&lt;/div&gt; &lt;div class="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;/div&gt; </code></pre> <p><strong>css:</strong></p> <pre><code>.comment { display: none; border:3px solid whiteSmoke; width:280px; } .more { cursor:pointer }​ </code></pre> <p><strong>JQuery:</strong></p> <pre><code>function toggleComment(index, hide) { //check the index to make sure it is in range if (index &gt; -1 &amp;&amp; $('.comment').length &gt; index) { //get the comment at the given index and apply the animation $('.comment:eq(' + index + ')') .slideToggle(18, function() { //if hiding then decrement var next = hide ? index + 1 : index - 1; //call toggle on the next index toggleComment(next , hide); }); //set to display block so they show up on their own line // .css('display', 'block'); } } $('.more').click(function() { //are the comments already open... returns true or false var hide = $(this).hasClass('open'); //default to start at the begining... each click brings the index to 0 var index = 0; //if the comments are not open then start at the end if (!hide) { index = $('.comment').length - 1 } //toggle the comments toggleComment(index, hide); //used to remember state.. adds class to more and takes it away hence toggle class $(this).toggleClass('open'); }); ​ </code></pre> <p>​</p> <p>The comments I intend to drop down aren't shown by default and hidden with css like the example link shows as it wouldn't be wise to load all comments by default for every user.</p> <p>They'll only be loaded on click of a "show all" link/submit. Anyway in the code below, my comments are grabbed from a file "show_all_comments" after it has been rendered on a page. In that file is a loop that loops through each comment and displays the data along with it's html.</p> <p><strong>What I want to do:</strong></p> <p>I don't want to render this on the page but some how in memory then be able to access the classes as if I was trying to access them from an actual page. This way I'll be able to access each comments class and use with the JSFiddle code.</p> <p>If that makes sense to you is this possible? If so how would I achieve this?</p> <p><strong>JQuery:</strong></p> <pre><code> var postContent = $(this).parents('.post_content'), commentContainer = postContent.find('.comment_container'); commentContainer.slice(0, -2).remove(); postContent.find('.comment_container:first') .before("&lt;%= j render 'users/partials/show_all_comments', :comments =&gt; @comments %&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