Question

I’m implementing this: http://jsfiddle.net/xkfqN/85/

html:

<div id="posts">
    <div class="more">Show More</div>
    <div class="commentsContainer">
        <div class="comment">Comment 1</div>
        <div class="comment">Comment 2</div>
        <div class="comment">Comment 3</div>
        <div class="comment">Comment 4</div>
        <div class="comment">Comment 5</div>
        <div class="comment">Comment 6</div>
        <div class="comment">Comment 7</div>
        <div class="comment">Comment 8</div>
        <div class="comment">Comment 9</div>
        <div class="comment">Comment 10</div>
    </div>
</div>

css:

.comment { 
    display: none;
    border:3px solid whiteSmoke;
    width:280px;
}

.more {
    cursor:pointer

}​

JQuery:

function toggleComment(index, hide) {
    //check the index to make sure it is in range
    if (index > -1 && $('.comment').length > 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');
});
​

​

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.

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.

What I want to do:

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.

If that makes sense to you is this possible? If so how would I achieve this?

JQuery:

 var postContent = $(this).parents('.post_content'),
    commentContainer = postContent.find('.comment_container');

    commentContainer.slice(0, -2).remove();
    postContent.find('.comment_container:first')
    .before("<%= j render 'users/partials/show_all_comments', :comments => @comments %>");

Answer 1

It sounds like you want to have disconnected DOM elements and search through them. You can do that quite easily:

var elements = $('<div><div class="one">one</div><div class="two">two</div></div>');
var divOne = elements.find('.one');

There, I’ve created a structure with a single top-level div 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 find and such to extract the bits I want.

If you wanted to put an extracted bit actually on the page somewhere, you’d probably want to clone it:

// Put "one" on the page
elements.find(".one").clone().appendTo(document.body);

---

But looking at your comment to Juhana on the question:

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.

…I wouldn’t load the additional comments at all (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.

Here’s an example – live example | source:

HTML:

<div id="commentsContainer">
  <div class="comment">Comment 1</div>
  <div class="comment">Comment 2</div>
  <div class="comment">Comment 3</div>
  <div class="comment">Comment 4</div>
  <div class="comment">Comment 5</div>
  <div class="comment">Comment 6</div>
  <div class="comment">Comment 7</div>
  <div class="comment">Comment 8</div>
  <div class="comment">Comment 9</div>
  <div class="comment">Comment 10</div>
  <div><a href="fallback.php" id="moreComments">more</a></div>
</div>

JavaScript:

jQuery(function($) {

  $("#moreComments").click(function(event) {
    var $this = $(this),
        moreDiv,
        container;

    event.preventDefault();
    moreDiv = $this.parent();
    container = moreDiv.parent();
    $this.replaceWith("<em>Loading...</em>");
    $.ajax({
      method: 'get',
      url:    'http://jsbin.com/ijarov',
      dataType: 'html',
      success: function(data) {
        moreDiv.remove();
        container.append(data);
      }
    });
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

What’s returned by the ajax call:

<div class="comment">Comment 11</div>
<div class="comment">Comment 12</div>
<div class="comment">Comment 13</div>
<div class="comment">Comment 14</div>
<div class="comment">Comment 15</div>
<div class="comment">Comment 16</div>
<div class="comment">Comment 17</div>
<div class="comment">Comment 18</div>
<div class="comment">Comment 19</div>
<div class="comment">Comment 20</div>

---

Re your comment below:

Say you don’t want to append “data” but access the classes in that file. Is that possible?

I don’t know what you mean by “…access the classes…”, 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 ajax success handler:

var elements = $(data);

Here’s the above example with different return data (a mix of div elements, some with the class comment and some with the class other), where I look at the data before appending it, and then only append the comments, not the “other”s: Live example | source

HTML:

<div id="commentsContainer">
  <div class="comment">Comment 1</div>
  <div class="comment">Comment 2</div>
  <div class="comment">Comment 3</div>
  <div class="comment">Comment 4</div>
  <div class="comment">Comment 5</div>
  <div class="comment">Comment 6</div>
  <div class="comment">Comment 7</div>
  <div class="comment">Comment 8</div>
  <div class="comment">Comment 9</div>
  <div class="comment">Comment 10</div>
  <div><a href="fallback.php" id="moreComments">more</a></div>
</div>
<hr>

JavaScript (only change is in the success function):

jQuery(function($) {

  $("#moreComments").click(function(event) {
    var $this = $(this),
        moreDiv,
        container;

    event.preventDefault();
    moreDiv = $this.parent();
    container = moreDiv.parent();
    $this.replaceWith("<em>Loading...</em>");
    $.ajax({
      method: 'get',
      url:    'http://jsbin.com/ijarov/2',
      dataType: 'html',
      success: function(data) {
        var elements = $(data);
        moreDiv.remove();
        display("Number of <code>.comment</code> elements: "+
                elements.filter('.comment').length);
        display("Number of <code>.other</code> elements: "+
                elements.filter('.other').length);
        display("Appending only the <code>.comment</code> ones.");
        elements.filter('.comment').appendTo(container);
      }
    });
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

Data returned by the ajax call:

<div class="comment">Comment 11</div>
<div class="other">Other 11</div>
<div class="comment">Comment 12</div>
<div class="other">Other 12</div>
<div class="comment">Comment 13</div>
<div class="comment">Comment 14</div>
<div class="comment">Comment 15</div>
<div class="comment">Comment 16</div>
<div class="comment">Comment 17</div>
<div class="comment">Comment 18</div>
<div class="comment">Comment 19</div>
<div class="comment">Comment 20</div>