jquery选择器追加多个div，而不是每个div一个

Question

我试图用jquery在每个链接上显示链接预览，但实际上我的代码附加了多个div(主体中的每个链接一个)，而不是链接本身一个。

小提琴在这里：https://jsfiddle.net/eg4zwpk9/4/

到目前为止我的代码

this.$(".Post-body").find('a').each((i, e) => {
this.$('.Post-body').attr('id', 'value');
const isMobile = navigator.userAgentData.mobile;
let controller = new AbortController();
let href = e.getAttribute("href");
console.log(href)
if (isMobile === false) {
fetch(`https://preview-api.bbspace.top/?url=` + encodeURIComponent(href), {
method: "GET",
mode: "cors",
signal: controller.signal,
credentials: "omit"
})
.then((res) => res.json())
.then((response) => {
console.log(response)
if (!e.text.startsWith("http")) return;
let $s = $('#value a')
let imgResp = '<img class="screenImg" src="' + response.image + '" width="250">';
if (response.image === undefined) {
imgResp = '<img class="screenImg" src="https://www.studioippocrate.com/wp-content/uploads/2017/11/pac-404.png" width="250">';
}

this.$('#value a').append('<div class="dropdown-prev">n' +
'  <button class="dropbtn"><i class="fas fa-search"></i></button>n' +
'  <div class="dropdown-content-prev">n' +
'    <div class="donContainer">n' +
'   ' + imgResp + '' +
'    <div class="titleDesc">' + response.description + '</div>  ' +
'  </div>n' +
'  </div>n' +
'</div>');
});
}
});

如何只显示每个链接的正确结果？

Answer 1

将预览元素附加到#value内的所有链接。取而代之的是：

this.$('#value a').append('<div class="dropdown-prev">n' +
'  <button class="dropbtn"><i class="fas fa-search"></i></button>n' +
'  <div class="dropdown-content-prev">n' +
'    <div class="donContainer">n' +
'   ' + imgResp + '' +
'    <div class="titleDesc">' + response.description + '</div>  ' +
'  </div>n' +
'  </div>n' +
'</div>');

你必须这样做：

$(e).append('<div class="dropdown-prev">n' +
'  <button class="dropbtn"><i class="fas fa-search"></i></button>n' +
'  <div class="dropdown-content-prev">n' +
'    <div class="donContainer">n' +
'   ' + imgResp + '' +
'    <div class="titleDesc">' + response.description + '</div>  ' +
'  </div>n' +
'  </div>n' +
'</div>');

你已经有了给你链接元素的每个函数。此外，将该id分配给.Post-body.也没有意义

Answer 2

我已经复制了你的fiddle并更正了它
总之，当你在附加新的html之前选择this.$('#value a')链接时，你就是在选择页面的所有链接，所以它会将新的html添加到你的所有链接中
要更正它，您只需将e转换为jquery，如下所示：$(e).append(...)