Question

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

Answer 1

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

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

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

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

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

但是看看你对Juhana的评论：

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

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

以下是一个示例 - 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); } });

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），我在此之前查看数据附加它，然后只附加评论，而不是“其他”：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 （只有更改位于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>

一组类可以存储在内存中，所以我可以在它们显示在页面上之前对它们做些什么吗？（JQuery的）

1 个答案:

一组类可以存储在内存中，所以我可以在它们显示在页面上之前对它们做些什么吗？ （JQuery的）

1 个答案:

一组类可以存储在内存中，所以我可以在它们显示在页面上之前对它们做些什么吗？（JQuery的）