用jquery给li添加id同时添加img

假设有30个li，图片地址为pic/skin_1.jpg
完整写法是
<li id="skin1"><img src="pic/skin_1.jpg"/></li>

<li id="skin2"><img src="pic/skin_2.jpg"/></li>
。。。此处省略一大段

<li id="skin30"><img src="pic/skin_30.jpg"/></li>
但是这样一来，代码就太冗余了，我希望通过jquery的遍历方法给每个li按照顺序自动添加id并添加img代码。
也就是说，我只需要在html代码里面写30个li标签就O了

请教高手，如何实现
ps：尽量不要使用if else语句，不知怎么回事，一遇到if else，jquery代码就全部失效

举报该问题

推荐答案 2013-07-11

$(function(){
$("li").each(function(index){
$(this).attr("id","skin"+(index+1)).html('<img src="pic/skin_'+(index+1)+'.jpg"/> ');
//或者可以这样 var img=$("img").attr("src","pic/skin_'+(index+1)+'.jpg") $(this).attr("id","skin"+(index+1)).append(img);
});
});

温馨提示：答案为网友推荐，仅供参考

当前网址：http://00.wendadaohang.com/zd/jeIBBTj0r.html

其他回答

第1个回答推荐于2018-03-23

按照你的这个意思，其实，在画面上HTML里好像连LI标签都不用写，因为看起来好像LI的ID跟img标签的src的值都有一样的变化规律，所以应该都可以动态画出来。代码在下面：

<html>
  <head>
    <script type="text/javascript" src="

    <script language="javascript">
      $(document).ready(function(){
        var container = $("#imgdata");
        for(var i=1; i<=30; i++){
          var liID = "skin" + i;
          var imgSrc = "pic/skin_" + i + ".jpg";

          var liObj = $("<li>").attr("id",liID);
          var imgObj = $("<img>").attr("src",imgSrc);

          //添加到画面上的UL标签里
          liObj.append(imgObj).appendTo("#imgdata");
        }
      });
    </script>
  </head>
  <body >
  <ul id="imgdata">

  <ul>
  </body>
</html>

本回答被提问者和网友采纳

第2个回答 2013-07-11

$(document).ready(function(){
    for (var i = 1 ; i <= 30 ; i++) {
        var li = "<li id='skin+"i"+'><img src='pic/skin_+"i"+.jpg'/></li>";
        $("body").append($(li));
    }
});

这样你HTML里也不用写li了

相似回答

Jquery添加Image对象答：1.就是创建JQUERY对象,然后追加到他所在的父级容器中 var image=$("<image src='XXXXX'/>");("#divs").append(image);2.构造image标签字符串，在他所在的父级容器中插入这个字符串 var imageStr="<image src='XXXXX' />"；("#divs").html(imageStr);...

<img id='img_"+i+"'></img> 在jquery中如何写ID啊答：//由于是动态加载，需要委派处理$("body").delegate("img[id^='img_']", "click", function(){ // 这里处理你动态生成的id是img_打头的img标签的单击事件});var str = "";for(var i = 0; i < 3; i++){ str += "<img id='img_" + i + "' />";}// 把上面的3...

如何在jquery中找到一个div中img属性?答：在jquery中找到一个div中img属性要给这个DIV一个id（或是一个唯一区分的class也是一样），如<div id="test"><img src="test.jpg" title="测试" /></div>，如果获取这个img的title属性，就可以用$("#test").find("img").attr("title")。jquery简介：jQuery是一个快速、简洁的JavaScript框架...

大家正在搜