是否可以将一组类存储在内存中，以便我可以在页面上显示它们之前对它们执行操作?(JQuery)

我正在实现这个：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');
});

我打算下拉的评论默认情况下不会显示，并且像示例链接所示使用 css 隐藏，因为默认情况下为每个用户加载所有评论是不明智的。

它们只会在单击"全部显示"链接/提交时加载。无论如何，在下面的代码中，我的评论是在页面上呈现后从文件"show_all_comments"中抓取的。该文件中有一个循环，循环遍历每个注释并显示数据及其 html。

我想做什么：

我

不想在页面上呈现它，而是在内存中呈现一些方式，然后能够访问这些类，就好像我试图从实际页面访问它们一样。这样，我将能够访问每个注释类并与JSFiddle代码一起使用。

如果这对你有意义，这可能吗？如果是这样，我将如何实现这一目标？

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

听起来你想要断开连接的 DOM 元素并搜索它们。您可以非常轻松地做到这一点：

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

在那里，我创建了一个包含所有其他顶级div的结构，并在其周围包装了一个 jQuery 实例。这些元素不在 DOM 中，它们与 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>

相关内容

最新更新

热门标签：