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

时间：2022-04-12 20:11:05

标记用

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="width: 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="width: 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="width: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="width: 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");

    //

}

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

相关文章