js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV

标记用 

js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了 

例子：

/*
添加1200 居中div 包裹 获取元素集合 上层元素100%
* @ele 改变元素
* @index 元素索引
* @color 100% 背景颜色
* */
function addW100Bg(ele,index,color,url){

/*获取list-bar*/
$bar= $(ele).eq(index).html();
/*设置list-bar*/
$(ele).eq(index).html('<div style=" 1200px; margin: 0px auto; overflow: hidden;">'+'<a href='+url+ ' target="_blank">'+$bar+'</a>'+'</div>');
$(ele).eq(index).css({"width":"100%","background":color});

}
addW100Bg(".list-bar",0,"#e1ebf4","http://www.no5.com.cn/brandstore-291.html");

下面就是常用的 单位里经常要操作DOM 页面模板 不过定的很死 

<div class="list-box">

<div class="list-bar"></div>

<dl>......</dl>

<dl>......</dl>

<div class="list-bar"></div>

<dl>......</dl>

<dl>......</dl>

.......

</div>

只能动态的添加DOM元素来改变页面 

要的效果就是中间1200px居中 1200下面的img添加a跳转  父级100%  第一个函数实现的就是这个效果

太麻烦了 直接把JS所有的都贴上来 省得以后找不到

var ClsSpecialTopicAdditionalJS = function () {
    //

 function marginleft(){
    var num = $('.prod-box').length;

     for(i=0;i < num;i++){

         if(i % 4 == 0){
             $('.prod-box').eq(i).css({"marginLeft":"60px"} );

         }

     }
 }
    marginleft();

    function addAfter(){
        /*头部*/
        var head='<div class="w100" id="head">' +
            '<div class="w1200">' +
            '<div class="banner-img"><img src="http://photo.no5.com.cn/publish/minganji/free_02.jpg" width="1200" height="481" alt=""/></div>' +
            ' <ul id="nav-fix">' +
            '<li><a href="#s1" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_04.jpg" width="131" height="84" alt=""/></a></li>' +
            ' <li><a href="#ss0" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_05.jpg" width="131" height="84" alt=""/></a></li>' +
            ' <li><a href="#ss1" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_06.jpg" width="134" height="84" alt=""/></a></li>' +
            '<li><a href="#ss2" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_07.jpg" width="126" height="84" alt=""/></a></li>' +
            '<li><a href="#ss3" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_08.jpg" width="129" height="84" alt=""/></a></li>' +
            '<li><a href="#ss4" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_09.jpg" width="134" height="84" alt=""/></a></li>' +
            '<li><a href="#ss5" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_10.jpg" width="134" height="84" alt=""/></a></li>' +
            '<li><a href="#ss6" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_11.jpg" width="136" height="84" alt=""/></a></li>' +
            '<li><a href="#ss7" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_12.jpg" width="145" height="84" alt=""/></a></li>' +
            '</ul>' +
            '<a href="http://www.no5.com.cn/product/4603.html" target="_blank">' +
            '<img src="http://photo.no5.com.cn/publish/minganji/free_14.jpg" width="262" height="434" alt="" id="s1"/></a>' +
            '<a href="http://www.no5.com.cn/product/22278.html" target="_blank">' +
            '<img src="http://photo.no5.com.cn/publish/minganji/free_15.jpg" width="360" height="434" alt=""/></a>' +
            '<a href="http://www.no5.com.cn/product/24533.html" target="_blank">' +
            '<img src="http://photo.no5.com.cn/publish/minganji/free_16.jpg" width="283" height="434" alt=""/></a>' +
            '<a href="http://www.no5.com.cn/product/17734.html" target="_blank">' +
            '<img src="http://photo.no5.com.cn/publish/minganji/free_17.jpg" width="295" height="434" alt=""/></a>' +
            '<a href="http://www.no5.com.cn/product/27606.html" target="_blank">' +
            '<img src="http://photo.no5.com.cn/publish/minganji/free_18.jpg" width="262" height="422" alt=""/></a>' +
            ' <a href="http://www.no5.com.cn/product/19867.html" target="_blank">' +
            '<img src="http://photo.no5.com.cn/publish/minganji/free_19.jpg" width="360" height="422" alt=""/></a>' +
            '<a href="http://www.no5.com.cn/product/7576.html" target="_blank">' +
            ' <img src="http://photo.no5.com.cn/publish/minganji/free_20.jpg" width="288" height="422" alt=""/></a>' +
            '<a href="http://www.no5.com.cn/product/23832.html" target="_blank">' +
            '<img src="http://photo.no5.com.cn/publish/minganji/free_21.jpg" width="290" height="422" alt=""/></a>' +
            '</div>' +
            ' </div>';

        $(".banner-box").after(head);
    }
    addAfter();

 function addJumpID() {

     for (i = 0, ii = $('.list-bar').length; i < ii; i++) {
         $('.list-bar').eq(i).attr({"id": "ss" + i, "name": "ss" + i})
     }

 }
    addJumpID();




$(window).scroll(
    function(){

        if( $(window).scrollTop() > 700||$(document).scrollTop() > 700){
            $('#nav-fix').css({"position":"fixed","top":"0px","z-index":"999"});
        }else{
            $('#nav-fix').css({"position":"relative","top":"0px","z-index":"999"});
        }
    }
)


/*
指定元素集合 添加父级元素
* @ele 获取元素
* @stat 开始位置
* @end 结束位置
* @return html element */
function addW1200(ele,star,end){
    var content = $(ele).slice(star,end).wrapAll('<div style=" 1200px; overflow: hidden; margin: 0px auto;"></div>');
}
    addW1200(".prod-box",0,8);
    addW1200(".prod-box",8,16);
    addW1200(".prod-box",16,24);
    addW1200(".prod-box",24,32);
    addW1200(".prod-box",32,40);
    addW1200(".prod-box",40,44);
    addW1200(".prod-box",44,52);
    addW1200(".prod-box",52,59);


/*宽度改变100%*/
    function addW100(ele){
        $box = $(ele).eq(0).html();
        $(ele).eq(0).html('<div style="100%; margin: 0px auto; overflow: hidden;">'+$box+'</div>');
        $(ele).eq(0).css({"width":"100%"});
    }
    addW100(".list-box");



/*
添加1200 居中div 包裹 获取元素集合 上层元素100%
* @ele 改变元素
* @index 元素索引
* @color 100% 背景颜色
* */
    function addW100Bg(ele,index,color,url){

        /*获取list-bar*/
        $bar=  $(ele).eq(index).html();
        /*设置list-bar*/
        $(ele).eq(index).html('<div style=" 1200px; margin: 0px auto; overflow: hidden;">'+'<a href='+url+ ' target="_blank">'+$bar+'</a>'+'</div>');
        $(ele).eq(index).css({"width":"100%","background":color});

    }
    addW100Bg(".list-bar",0,"#e1ebf4","http://www.no5.com.cn/brandstore-291.html");
    addW100Bg(".list-bar",1,"#c2e3f8","http://www.no5.com.cn/brandstore-44.html");
    addW100Bg(".list-bar",2,"#f2f7f9","http://www.no5.com.cn/brandstore-267.html");
    addW100Bg(".list-bar",3,"#e5f8fc","http://www.no5.com.cn/brandstore-986.html");
    addW100Bg(".list-bar",4,"#d7ebf4","http://www.no5.com.cn/brandstore-684.html");
    addW100Bg(".list-bar",5,"#eaeaea","http://www.no5.com.cn/brandstore-1258.html");
    addW100Bg(".list-bar",6,"#ffffff","http://www.no5.com.cn/brandstore-42.html");
    addW100Bg(".list-bar",7,"#ffffff","http://www.no5.com.cn/brandstore-950.html");






/*父元素下的子元素删除
* @parent 父级元素
* @son  删除的子元素
* */
    function eleRemove(parent,son){
        $(parent).find(son).remove();
    }
     eleRemove(".nav-layer","ul");



    //
}

写法好糟糕了 希望大神看到能指点一二

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xxx91hx/p/4110648.html