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

假设有30个li,图片地址为pic/skin_1.jpg完整写法是<liid="skin1"><imgsrc="pic/skin_1.jpg"/></li><liid="... 假设有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代码就全部失效
展开
 我来答
zheyunyue
2013-07-11 · 超过10用户采纳过TA的回答
知道答主
回答量:25
采纳率:0%
帮助的人:27.4万
展开全部
$(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);
});
});
zhfto
推荐于2018-03-23 · TA获得超过563个赞
知道小有建树答主
回答量:107
采纳率:0%
帮助的人:214万
展开全部

按照你的这个意思,其实,在画面上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>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
lvming6816077
2013-07-11 · TA获得超过364个赞
知道小有建树答主
回答量:139
采纳率:0%
帮助的人:138万
展开全部
$(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了

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式