我使用的是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>
最佳答案
您可以遍历正文中的所有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>