jquery - 将一些对象添加到父级，它是具有相似 ID 的 DIV 之一

Question

我希望我的代码像这样工作:很少有具有相似 ID 和相似内容的 DIV。当我点击 CLICK 按钮时，我需要已经存在的 DIV id="object"来添加到点击按钮的父 div。我的代码只适用于第一个 DIV。

HTML

<div id="article">
<p>...CONTENT</p>
<div class="click">CLICK</div>
</div>

<div id="article">
<p>...CONTENT</p>
<div class="click">CLICK</div>
</div>

CSS

#article{
    width: 100%;
    height: 200px;
    background: gray;
    color: white;
}

.click{
    cursor: pointer;
    color: red;
}

#object{
    width: 100%;
    height: 100px;
    background: red;
}

查询

$(".click").click(function(){
    $('#object').prependTo("#article");
});

JSFiddle

Answer 1

好的，首先，多个元素具有相同的 ID 是非常糟糕的，非常糟糕。参见 Why is it a bad thing to have multiple HTML elements with the same id attribute? .您可以改用类

<div class="article">
<p>...CONTENT</p>
<div class="click">CLICK</div>
</div>

<div class="article">
<p>...CONTENT</p>
<div class="click">CLICK</div>
</div>

要添加到有问题的最接近的 div，您可以将 jQuery closest() 与 $(this) 结合使用，当它进入处理程序

$(this).closest('.article').prepend($('#object'));

看到它工作 here