Javascript 为消息传递系统追加/添加子Div（jQuery）

所以，我在尝试向父div追加/添加子div时遇到了困难，我想这里的某个人可能知道最好的方法。我已经附加了我的代码（现在没有PHP，只是硬编码文本和其他东西）。但我想做的是：

• 当发布消息时，点击“回复按钮”，一个新的div将出现在包含回复表单的下方

现在，以下是我知道但无法回避的问题：

• DIV是一个类，所以当我使用jQuery尝试以DIV为目标时，它会以一切为目标，因为它不是唯一的

• 回复按钮也是一个类，因此它不是唯一的

下面是一段视频：

---

所以，我看到了缺陷，但我就是不知道该怎么做！任何指导都会很棒！：）

编辑：仅当

.newreply

是

.btn reply

的子项时有效

我不确定我是否理解正确，但请尝试以下方法：

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

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

 });

请注意

“newreply”

后面的

这个

关键字

---

另一种方法是使用

.find（）

，比如

$（this）.find（'.newreply'）.toggleClass（“show”）
试试这段代码，它应该在单击按钮所在的父级“roar”div之后附加一个reply div：

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

$（'.btn reply'）。单击（函数（）{
var replyHtml=“…在此处为回复生成内部html字符串…”
$('' {
类名：“newreply”
}).html（replyHtml）.insertAfter（$（this.parents（'.roar'））；
});

您将需要在javascript中设置newreply div。例如，添加单击事件
尝试：

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

但是，我同意方济各会的意见，即更好的方法是修改
HTML
，并为每个消息集分配唯一的
id
。通过这种方式，您可以抓取
.newreply
以基于共享的唯一
id
显示，该id对于
HTML
布局的定位是不可知的

例如

假设我理解您正试图正确执行的操作，您希望.btn reply只显示其内容父级的表单，而不显示其他div，对吗？您好，您应该更容易将.newreply div作为目标。您现在也可以使用.parent（）和.sibles（）或.next（）等来执行此操作，但如果更改标记，则不可靠。要么设置类或ID，要么按子对象对它们进行分组。@Fran我认为这些都不起作用，newreply div不是btnreply div的后代，您需要沿着dom向上移动，而不是向下移动。您可以从$（此处）使用按钮。您可以使用.parents（[selector]）来访问，假设该按钮位于您想要的容器中，请参见：jacob是对的，但这在我的观点中是不可靠的。如果更改标记，它将停止工作。阅读我对这个问题的评论。@Francisc无论你做什么，如果你改变了你的标记，你必须更新你的javascript。我想我的答案可能是你能得到的最符合问题要求的答案。使用$（'a-button'）。父级（'.div-i-want'）将选择优于$（'#div'）的div，因为它将适用于所有后续按钮。您还可以使用live（）事件：
$('.btn-reply').click(function () {
    var replyHtml = '..build inner html string for the reply here..'
    $('<div />' {
        className: 'newreply'
    }).html(replyHtml).insertAfter($(this).parents('.roar'));
});

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

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

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