Javascript 查找和插入项目

我想检查图像的每个属性src，它的class

.sogreen

在名称开头或名称中的任何位置都有唯一的前缀。之后，它将找到

img

元素，该元素具有

title

属性，该属性在我们获得的第一个图像上具有相同的前缀，然后将该图像插入到第一个图像下面

HTML

结果应为：

粗糙JS不工作：

var imgsrc=$（“img.sogreen”）.attr（'src'）；
控制台日志（imgsrc）；
$（imgsrc）。每个（函数（索引、值）{
var imgData=$（本）；
$（“img”）。每个函数（index2，value2）{
var elementTocounter=$（this.attr（'title'）；
if（imgData==elementTocounter）{
//TODO img insertafter so green
}
});
});

---

注意：sogreen映像可能会持续更改，例如，如果sogreen更改了某个实例的src，则下面的映像也应该更新。

您可以在vanilla JS中这样做：

//获取原始图像
让origImages=document.queryselectoral（“.original.sogreen”）
//翻阅原稿
源代码forEach（（源代码）=>{
//获取前缀
let prefix=orig.attributes.src.value.split（“-”[0]
//获取要插入的元素
let insert=document.querySelector（`[title='${prefix}'].sogreen`）
//将元素作为同级插入
// https://stackoverflow.com/a/4793630/1366033
orig.parentNode.insertBefore（插入，orig.nextSibling）；
})

堆栈片段中的演示

//获取原始图像
让origImages=document.queryselectoral（“.original.sogreen”）
//翻阅原稿
源代码forEach（（源代码）=>{
//获取前缀
let prefix=orig.attributes.src.value.split（“-”[0]
//获取要插入的元素
let insert=document.querySelector（`[title='${prefix}'].sogreen`）
//将元素作为同级插入
// https://stackoverflow.com/a/4793630/1366033
orig.parentNode.insertBefore（插入，orig.nextSibling）；
})

---

下面使用

filter（）

查找相关的对向图像，并使用

after（）

插入

//仅演示安装
$（'img'）.attr（'alt'，function（）{return$（this.attr（'src'）}）；
让$origImg=$（'.original img.sogreen'），
$insImg=$（'.image条目插入img.sogreen'）
$insImg.每个（函数（）{
常量前缀=this.title；
$origImg.filter（函数（）{
返回$（this.attr（'src'）.startsWith（前缀）
}).在此之后
})

img{显示：块；边距：10px}

原创的


插入

您可以使用

.after（函数）

jQuery方法，如下所示：

$('div.original > img[src].sogreen').after(function() {
    let prefix = $(this).attr('src').split('-')[0];
    return $('div.image-entry-to-insert > img[title].sogreen')
        .filter((i,img) => $(img).attr('title') === prefix);
});

演示

$（函数（）{
$（'div.original>img[src].sogreen'）。在（function（）之后{
让前缀=$（this.attr（'src'）.split（'-'）[0]；
return$（'div.image-entry-to-insert>img[title].sogreen'）
.filter（（i，img）=>$（img）.attr（'title'）==前缀）；
});
});
以下是使用JQuery作为@KyleMit解决您的问题的解决方案，它已经发布了一个完美的答案


var origImages=$（“.original.sogreen”）；
$.each（源代码、函数（键、值）{
变量前缀=$（值）.attr（'src'）.split（'-'）[1]；
var toI=$（'.插入[title='+prefix+']'的图像条目）；
toI.插入后（$（值））；
})
。原版{
显示器：flex；
弯曲方向：立柱；
}

谢谢@nicholas，但是如果url已经包含，它就不起作用了：（@LuvyGimeno你指的是哪个url？如果你指的是
src=“pref99 awesome.png”
更改为
src=“sometingelsinhere-pref99-awesome.png”
只需确保不获取
[0]
element在拆分数组中，您将得到所需的一个。我正在编辑文章以包含此内容。谢谢！@PeterKA如果url已经存在，它是否会不起作用included@LuvyGimeno请你解释一下你的意思，谢谢。