为消息系统附加/添加子 Div (jQuery)答案

【问题标题】：Append/Add Child Div (jQuery) for Messaging System为消息系统附加/添加子 Div (jQuery)
【发布时间】：2011-06-27 08:51:42
【问题描述】：

因此，我在尝试将子 div 附加/添加到父 div 时遇到了困难，并且认为这里有人可能知道我解决此问题的最佳方法。我附上了我的代码（现在没有 PHP，只是硬编码文本和东西）。但这是我想要做的：

发布消息后，您点击“回复按钮”，下方会出现一个包含回复表单的新 div。

目前，以下是我知道但无法解决的问题：

DIV 是一个类，所以当我使用 jQuery 尝试定位 DIV 时，它会定位所有内容，因为它不是唯一的。
回复按钮也是一个类，所以它不是唯一的。

这里是它的视频：http://tinypic.com/r/2luxwnr/7

<body>
    <div id="content-container">
        <div id="message-viewer">
            <div class="roar">
                <div class="roaractionpanel">
                    <div id="msg-business2"></div>
                    <div class="roartime"><p class="roartime-text">3:26PM</p></div>
                </div>
                <div class="roarcontent">
                    <button type="submit" class="btn-reply"></button>
                    <h5>Test Post</h5><br>
                    <h6>Lord Varlin</h6><br>
                    <h2>Test post... let's see.</h2>
                </div>
            </div>
            <div class="newreply">
                <div class="newreplycontent">
                    <h1>This is where the fields for a new reply will go.</h1>
                </div>
            </div>


            <div class="roar">
                <div class="roaractionpanel">
                    <div id="msg-business2"></div>
                    <div class="roartime"><p class="roartime-text">3:26PM</p></div>
                </div>
                <div class="roarcontent">
                    <button type="submit" class="btn-reply"></button>
                    <h5>Testing another</h5><br>
                    <h6>Lord Varlin</h6><br>
                    <h2>Hmm dee dumm...</h2>
                </div>
            </div>
            <div class="roarreply">
                 <div class="roarreply-marker">
                    <p class="roarreplytime-text">June 26th @ 4:42AM</p>
                 </div>
                 <div class="roarreplycontent">
                    <h9>Testing a reply.  Hmmmm.</h9><br>
                    <h8>Lord Varlin</h8>
                 </div>
            </div>
            <div class="newreply">
                <div class="newreplycontent">
                    <h1>This is where the fields for a new reply will go.</h1>
                </div>
            </div>


            <div class="roar">
                <div class="roaractionpanel">
                    <div id="msg-business2"></div>
                    <div class="roartime"><p class="roartime-    text">3:26PM</p></div>
                </div>
                <div class="roarcontent">
                    <button type="submit" class="btn-reply"></button>
                    <h5>Testing another</h5><br>
                    <h6>Lord Varlin</h6><br>
                    <h2>jQuery, work with me please.</h2>
                </div>
            </div>
            <div class="roarreply">
                 <div class="roarreply-marker">
                    <p class="roarreplytime-text">June 26th @ 4:42AM</p>
                 </div>
                 <div class="roarreplycontent">
                    <h9>Testing a reply.  Hmmmm.</h9><br>
                    <h8>Lord Varlin</h8>
                 </div>
            </div>
            <div class="roarreply">
                 <div class="roarreply-marker">
                    <p class="roarreplytime-text">June 26th @ 4:42AM</p>
                 </div>
                 <div class="roarreplycontent">
                    <h9>Testing a reply.  Hmmmm.</h9><br>
                    <h8>Lord Varlin</h8>
                 </div>
            </div>
            <div class="newreply">
                <div class="newreplycontent">
                    <h1>This is where the fields for a new reply will go.</h1>
                </div>
            </div>
        </div>
    </div>
</body>

JQUERY

$(".btn-reply").click(function() {

    $(".newreply").toggleClass("show");
    return false;

 });

所以，我看到了缺陷，但我就是想不通如何解决这个问题！任何指导都会很棒！ :)

【问题讨论】：

假设我理解您要正确执行的操作，您希望 .btn-reply 仅显示其 roarcontent 父级的表单，而不显示其他 div，对吗？
嗨，您应该更容易定位 .newreply div。您现在也可以使用 .parent() 和 .siblings() 或 .next() （等）来执行此操作，但如果您更改标记，则不可靠。设置类或 ID 或按子级分组。

标签： javascript jquery html

【解决方案1】：

试试：

$('.btn-reply').click(function(){
    $(this).parents('.roar').siblings('.newreply').toggleClass('show');
    return false;
});

但是，我同意Francisc 的观点，更好的方法是修改HTML 并为每个消息集分配一个唯一的id。这样，您可以根据共享的唯一 id 抓取 .newreply 以显示，这与 HTML 布局的定位无关。

例如

<div class="roar" rel="msg0">...</div>
...
<button class="btn-reply" rel="msg0"></button>
...
<div class="newreply" rel="msg0">...</div>
...

那么你的 jQuery 就变成了：

$('.btn-reply').click(function(){
    var id = $(this).attr('rel');
    var selector = '.newreply[rel=' + id + ']';
    $(selector).toggleClass('show');
    return false;
});

【讨论】：

【解决方案2】：

编辑：仅当.newreply 是.btn-reply 的子级时才有效。

我不确定我的理解是否正确，但试试这个：

$(".btn-reply").click(function() {

    $(".newreply",this).toggleClass("show");
    return false;

 });

注意".newreply" 后面的this 关键字。

另一种方法是使用.find()，例如$(this).find('.newreply').toggleClass("show");。

【讨论】：

@Fran 我认为这些行不通，newreply div 不是 btnreply div 的后代，你需要向上移动，而不是向下移动。
你有来自 $(this) 的按钮。您可以使用 .parents([selector]) 假设您想要的容器内的按钮，请参阅：api.jquery.com/parents
jacob 是对的，但在我看来这并不可靠。如果您更改标记，它将停止工作。阅读我对这个问题的评论。
@Francisc 不管你做什么，如果你改变你的标记，你将不得不更新你的javascript。我认为我的答案可能是您能满足问题要求的最佳答案。使用 $('a-button).parent('.div-i-want') 将比 $('#div') 更好地选择 div，因为它适用于所有后续按钮。你也可以使用 live() 事件：api.jquery.com/live

【解决方案3】：

试试这个代码，它应该在被点击的按钮所在的父 'roar' div 之后附加一个回复 div：

$('.btn-reply').click(function () {
    var replyHtml = '..build inner html string for the reply here..'
    $('<div />' {
        className: 'newreply'
    }).html(replyHtml).insertAfter($(this).parents('.roar'));
});

您需要在 javascript 中对 newreply div 进行任何设置。例如。添加点击事件

【讨论】：