gpt4 book ai didi

javascript - 如何在第一个 img 标签之前和第二个 img 标签之后添加 html 代码

转载 作者:搜寻专家 更新时间:2023-10-31 22:39:13 25 4
gpt4 key购买 nike

我使用的 html 看起来像下面的代码。我正在使用 javascript 代码在第一个 img 标记之前替换或添加代码,并在第二个 img 标记之后添加代码。我该怎么做?

<body>
<p>test</p>
<img src="test.png" />
<img src="test2.png" />
<p>test</p>
<img src="test3.png" />
<img src="test4.png" />
<p>test></p>
</body>

js:

    var Children  = document.getElementsByClassName('img-responsive');
for (i = 0; i <Children.length; i++) {
alert(Children[i].innerHTML);
Children[i].innerHTML = Children[i].id;
if(i==1 && i==3) {
string = string.split('<img').join(' <div class="row"> <div class="col-md-2"><img class="img-responsive" ');
}

if(i==0 && i==2) {
string=string.split('<img').join(' <div class="row"> <div class="col-md-2"><img class="img-responsive" ');
}
}

期望的输出:

<body>
<p>test</p>
<div class=“row”>
<div class=“col-md-6”>
<img class=“img-responsive" src="test.png" />
<img src="test2.png" />
</div>
</div>
<p>test</p>
<div class=“row”>
<div class=“col-md-6”>
<img class=“img-responsive" src="test3.png" />
<img class=“img-responsive" src="test4.png" />
</div>
</div>
<p>test></p>
</body>

最佳答案

您可以遍历 body 中的所有 img 标签并使用 wrapAll() 方法,如下所示。

var imgs = $('body > img');

for (var i = 0; i < imgs.length; i += 2) {
var add = imgs.eq(i).add(imgs.eq(i + 1));
add.wrapAll('<div class="row"><div class="col-md-6"></div></div>');
}
.col-md-6 {
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p>test</p>
<img src="test.png" />
<img src="test2.png" />
<p>test</p>
<img src="test3.png" />
<img src="test4.png" />
<p>test</p>
</body>

关于javascript - 如何在第一个 img 标签之前和第二个 img 标签之后添加 html 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41918659/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com