如何使用 jquery 將相應的 html 附加到 li 項

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>');

提琴手

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>`); });