$(function(){
var obj = $("div[id^='channel_'][id$='_left']");
var val = obj.html();
var id = obj.attr("id");
//alert("value="+val+"id="+id); $("#"+id).html("<div id='channel_zcfg_left_content'>"+val+"</div>"); });

今天遇到一个不太棘手的问题,使用jquery的一些高级功能解决了,今天做些记录。上面就是全部代码,看起来有些让人迷惑,下面听我慢慢讲来!

需求和问题描述:

有十来个页面中有类似的div,它们的id略有不同,相同的是以“channel_”开头并且以“_left”结尾,每个页面仅有一个。我想把这个div中的数据上再加一个div用来控制排版和样式。一个个添加工作量也并不大,总共也就十来个页面。但技术含量很低,突发奇想要用jquery来解决它。

首先, $("div[id^='channel_'][id$='_left']");用来或许div对象,这样的方式可以获得所有div中id以channel_开头、以_left结尾的标签。

然后,获得其中内容和确定的id

最后将包装好的数据放回原div中。

这样我只需要使用css控制channel_zcfg_left_content这个id既可以实现样式和排版的需求。

jquery再体验的更多相关文章

  1. Node.js 网页瘸腿稍强点爬虫再体验

    这回爬虫走得好点了,每次正常读取文章数目总是一样的,但是有程序僵住了情况,不知什么原因. 代码如下: // 内置http模块,提供了http服务器和客户端功能 var http=require(&qu ...

  2. JQuery初体验

    虽然做b/s也有一年半了,但是还没怎么认真的去看JQuery,趁自己生病的这几天,恶补一下JQuery方面的知识,保持学习的态度,内容很简单,聊以自慰一下>_<.废话不多说,直接上代码了. ...

  3. jquery再学习(1)

    一:jquery对象和js的dom对象相互转化 html代码 <ul> <li class="sxf" name="dd">第一< ...

  4. Asp.Net Core微服务再体验

    ASP.Net Core的基本配置 .在VS中调试的时候有很多修改Web应用运行端口的方法.但是在开发.调试微服务应用的时候可能需要同时在不同端口上开启多个服务器的实例,因此下面主要看看如何通过命令行 ...

  5. 【原创】Jquery初体验二

    快速导航 一.传统方式生成Table 二.使用jquery.tmpl插件快速生成Table 三.Jquery中的操作class的几个方法 四:jq里面的克隆 五:属性过滤器 六:表单元素过滤器 一.传 ...

  6. Jquery初体验一

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. Xamarin.Android再体验之简单的登录Demo

    一.前言 在空闲之余,学学新东西 二.服务端的代码编写与部署 这里采取的方式是MVC+EF返回Json数据,(本来是想用Nancy来实现的,想想电脑太卡就不开多个虚拟机了,用用IIS部署也好) 主要是 ...

  8. rails再体验(第一个程序)

    掌握redmine plugin开发的目标在2016年未实现,2017年继续. 选择<Ruby on Rails Tutorial>教程,windows安装railsinstaller,该 ...

  9. 沉淀,再出发:jQuery的初步了解和入门

    沉淀,再出发:jQuery的初步了解和入门 一.前言     对于后端开发者来说,是不是真的不需要了解前端的开发经过和相关技术,从我个人的角度来说,我觉得如果不了解或者接触很少,极有可能造成开发的时候 ...

随机推荐

  1. 嵌入式Linux常见问题

    Linux问题集 1 linux设置环境变量及保存地点 1. 显示环境变量HOME $ echo $HOME /home/terry 2. 设置一个新的环境变量WELCOME $ exportWELC ...

  2. UVa 11371 - Number Theory for Newbies

    題目:給你一個數字n.將裡面每位的數又一次組合形成a,b.使得a-b最大且是9的倍數. 分析:數論. 題目要求a,b和n的位數同样,不能有前導0. 定理1:交換一個數字中的某兩個位的數,形成的新數組和 ...

  3. Java调用cmd命令 打开一个站点

    使用Java程序打开一个站点 近期做了个东西使用SWT技术在一个client程序 须要升级时在提示升级 点击窗口上的一个连接 打开下载网页 花费了我非常长时间 用到了把它记录下来  怕是忘记,须要时能 ...

  4. 嵌入式linux多进程编程

    嵌入式linux多进程编程 在主程序显示文本菜单.提供例如以下服务.要求每一个服务都通过生成子进程来提供. 服务包含:日历信息显示,日期信息显示,推断闰年服务,文件复制功能,数字排序功能.退出功能. ...

  5. Servlet和JSP读书笔记(一)

    Java Servlet 技术,简称Servlet,是Java中用于开发web应用程序的基本技术. Servlet实际上也就是一个Java程序.一个Servlet应用程序通常包含很多Servlet.而 ...

  6. SVM入门(十)将SVM用于多类分类

    源地址:http://www.blogjava.net/zhenandaci/archive/2009/03/26/262113.html 从 SVM的那几张图可以看出来,SVM是一种典型的两类分类器 ...

  7. 如何去掉List中的重复内容

    1.通过循环进行删除 public static void removeDuplicate(List list) { ; i < list.size() - ; i ++ ) { ; j > ...

  8. DMA过程分析

    1.1 当我们在应用程序中编写write系统调用,向磁盘中写入数据时,写入请求会先调用底层写函数,将请求先写入内存中的页快速缓存(page cache)中,写入成功则立马返回,真正的写入磁盘操作会延迟 ...

  9. 《转》div 中间固定 左右自适应实现

    <转自>:http://www.w3cplus.com/css/layout-column-three 对于我来说,这是一种很少碰到的布局方法,不知道大家有何体会,那么下面我们一起来看这种 ...

  10. [Cocos2d-x]Android的android.mk文件通用版本

    原文地址: http://blog.ready4go.com/blog/2013/10/12/update-android-dot-mk-with-local-src-files-and-local- ...