javascript - Can a set of classes be stored in memory, so I can do things to them before I display them on a page? (JQuery)

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');
});

</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.

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 %>");

score 1 · Accepted Answer

听起来您想要断开 DOM 元素并通过它们进行搜索。你可以很容易地做到这一点：

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

在那里，我创建了一个div包含所有其他结构的顶层结构，并在其周围包装了一个 jQuery 实例。元素不在 DOM 中，它们与它完全断开。然后我可以使用 jQuery 之类的方法find来提取我想要的位。

如果您想将提取的位实际放在页面上的某个位置，您可能想要clone它：

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

但是看看你对 Juhana 的评论：

Juhana：想象一个用户有一个有 4000 条评论的微博。每次用户进入带有该微博的页面时，都会从数据库中加载所有 4000 条评论，然后将其隐藏。即使用户没有点击显示全部链接。那不是我想做的事。想象一下有 1000 名用户查看该微博。这将意味着 4000 条评论被加载然后隐藏 1000 次，无论用户是否点击全部显示。

...我根本不会加载其他评论（不在 HTML 中，也不在脚本中）。相反，我只会加载我要显示的评论，然后让“更多”链接在用户点击它时为其余的评论触发一个 ajax 请求。仅仅将它们从 HTML 移动到脚本中，您不会获得太多（如果有的话）。

这是一个例子 -活生生的例子| 来源：

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);
  }
});

ajax 调用返回的内容：

<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>

在下面回复您的评论：

假设您不想附加“数据”，但要访问该文件中的类。那可能吗？

我不知道您所说的“...访问类...”是什么意思，但是如果您的意思是与返回的元素进行交互而不附加它们，则只需实例化它们，就像我在上面所做的那样用文字字符串回答。例如，在ajax成功处理程序中执行此操作：

var elements = $(data);

这是上面带有不同返回数据的示例（div元素的混合，一些与类comment和一些与类other），我在附加数据之前查看数据，然后只附加注释，而不是“其他” ：示例| 资源

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 （仅在success函数中进行更改）：

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);
  }
});

调用返回的数据ajax：

<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>

javascript - Can a set of classes be stored in memory, so I can do things to them before I display them on a page? (JQuery)

1 回答 1

Related

Reference