Question

嗨，这是我的HTML代码

<li class="item"> <img src="te.jpeg"/> <li>
<li class="item"> <img src="je.jpeg"/> <li>
<li class="item"> <img src="mse.jpeg"/> <li>
<li class="item"> <img src="tdr.jpeg"/> <li>
<li class="item"> <img src="chk.jpeg"/> <li>

在这里，我想使用jquery附加一个包含不同内容的

项目，请参阅下文，

<li class="item"> <img src="te.jpeg"/>  <p class="item-name name1" >First de </p> <li>
<li class="item"> <img src="je.jpeg"/>  <p class="item-name name2" >second des </p> <li>
<li class="item"> <img src="mse.jpeg"/> <p class="item-name name3" >third des </p>  <li>
<li class="item"> <img src="tdr.jpeg"/> <p class="item-name name4" >Fourth de </p> <li>
<li class="item"> <img src="chk.jpeg"/> <p class="item-name name5" >Fifth des </p> <li>

请使用jquery帮助完成此操作。

Answer 1

var htmls = ['First de','second des','third des','fourth des'];
var classes = ['class1','class2','class3','class4'];

var i = 0;
$('.item').each(function(){
 $(this).children('img').after('<p class="'+classes[i]+'">'+htmls[i]+'</p>');
 i++;

})

为每个追加使用循环

Answer 2

$('li img[src="te.jpeg"]').parent().append('<p class="item-name name1" >First de </p>');

jsfiddle

Answer 3

var className = ['name1', 'name2', 'name3', 'name4,', 'name5' ];
var des = ['First des', 'Second des', 'Third des', 'Fourth des', 'Fifth des' ];

$("li.item").each(function( index ) {
  $(this).append(`<p class="item-name ${className[index]}" >${des[index]}</p>`);
});

如何使用jquery将相应的html附加到li项目

3 个答案: