<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .Prompt_container { width: 990px; margin: 70px auto 0; position: relative; } .Prompt_container h1 { color: #F40; } .Prompt_container .Prompt_box { height: 260px; margin-top: 10px; position: relative; background-color: #f0f7ed; padding-left: 260px; } .Prompt_container .box-title { position: absolute; left: 0; top: 0; bottom: 0; height: 260px; width: 230px; background-color: #87c308; color: #FFF; } .Prompt_container .sprite.pc { width: 122px; height: 110px; display: inline-block; margin: 46px auto 0; background: url('upgrade.png') no-repeat; background-position: -575px 0; background-size: 1154px 141px; image-rendering: pixelated; } .Prompt_container .box-title b { display: block; font-size: 22px; font-weight: 400; line-height: 103px; text-align: center; } .Prompt_container .box-title .arrow { border-width: 15px 12px; border-style: solid; border-color: transparent; _border-color: pink; _filter: chroma(color=pink); border-left-color: #87c308; position: absolute; right: -24px; top: 50%; margin-top: -12px; width: 0; height: 0; line-height: 0; font-size: 0; } .Prompt_list{ overflow: hidden; padding-top: 30px; } .Prompt_list li { float: left; display: inline; width: 240px; height: 230px; list-style: none; } .Prompt_container .sprite.chrome { width: 100px; height: 100px; display:block; margin: 0 auto; background: url('upgrade.png') no-repeat; background-position: -258px 0; background-size: 1154px 141px; image-rendering: pixelated; } .Prompt_list .chrome-item{ color: #87c308; } .pc-box .Prompt_list li p { margin-top: 28px; text-align: center; margin-bottom: 8px; } .Prompt_list li a { display: block; width: 168px; margin: 0 auto; height: 40px; line-height: 40px; color: #FFF; background-color: #87c308; position: relative; font-size: 18px; text-decoration: none; } .box ul li, .box-title, .pc-box li a { text-align: center; } .box-title b, .pc-box li a b { font-weight: 400; } .pc-box li a em, .pc-box li a i { border-width: 7px 6px; border-style: solid; border-color: transparent; _border-color: pink; _filter: chroma(color=pink); border-left-color: #41901a; position: absolute; right: 18px; top: 13px; width: 0; height: 0; line-height: 0; font-size: 0; } .pc-box .Prompt_list li a i { border-left-color: #87c308; right: 20px; } .pc-box li a em, .pc-box li a i { border-width: 7px 6px; border-style: solid; border-color: transparent; _border-color: pink; _filter: chroma(color=pink); border-left-color: #41901a; position: absolute; right: 18px; top: 13px; width: 0; height: 0; line-height: 0; font-size: 0; } </style> </head> <body> <div id="langs">[ <i class="zh">中文</i> | <i class="en">English</i> ]</div> <div class="Prompt_container"> <h1 lang-zh='温馨提醒：您当前的浏览器版本过低，无法正常工作，请升级浏览器，并设置新安装的浏览器为默认浏览器。' lang-en="Reminder: your current browser version is too low to work properly. Please upgrade your browser and set the new installed browser as the default browser."> 温馨提醒：您当前的浏览器版本过低，无法正常工作，请升级浏览器，并设置新安装的浏览器为默认浏览器。</h1> <div class="Prompt_box pc-box"> <span class="box-title"> <i class="sprite pc"></i> <b lang-zh="浏览器升级推荐" lang-en="browsers for pc">浏览器升级推荐</b> <em class="arrow"></em> </span> <ul class="Prompt_list"> <li class="chrome-item"> <i class="sprite chrome"></i> <p lang-zh="推荐选择" lang-en="Recommended Choice">推荐选择</p> <a id="chrome" target="_blank" href-en="http://www.google.com/intl/en/chrome/browser/desktop/" href-zh="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/" href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/?spm=a21bo.45958.920906.d1.tXHPJN" data-spm-click="gostr=/updater;locaid=d1;name=google" data-spm-anchor-id="a21bo.45958.920906.d1"> <b lang-zh="谷歌浏览器" lang-en="Chrome">谷歌浏览器</b> <em></em> <i></i> </a> </li> </ul> </div> </div> </body> <script src="../../static/js/jquery-1.8.3.min.js"></script> <script> var $chrome = $("#chrome"); var $langs = $('#langs i'); $langs.click(function(){ if($(this).hasClass('zh')){ //判断class是否包含（zh） console.log($(this)); $chrome.attr("href", $chrome.attr('href-zh')); $('[lang-zh]').each(function() { //循环所有含有【lang-zh】的属性 console.log($(this).attr('lang-zh')); //打印出含有【lang-zh】属性的值 $(this).text($(this).attr('lang-zh')); //将含有【lang-zh】属性值赋值给每个含有【lang-zh】 }); }else { console.log($(this)); $chrome.attr("href", $chrome.attr('href-en')); $('[lang-en]').each(function () { console.log($(this).attr('lang-en')); $(this).text($(this).attr('lang-en')); }); } }); </script> </html>
如：
var self = $('父级 所有子集'); self.each(function(){ var objString = $(this).text(); console.log(objString); var objLength = $(this).text().length; var num =80; //数量 if(objLength > num){ //超过80个字符 $(this).attr('title',objString); //给每个子元素添加title属性并赋值 $(this).text(objString.substring(0,num) + '...'); //截取的字符串 } });