js遍历多个div并自动获取姓名的姓氏填入span

2023-11-08 17:10

本文主要是介绍js遍历多个div并自动获取姓名的姓氏填入span,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

div class="mui-content" style="background-color: #f7f7f7;">
            <div style="width: 100%;height: 0.2rem;"></div>
            <!--单个地址-->
            <div class="jutidizhi">
                <span class="xing"></span>
                <span class="xingming">杨智利</span>
                <span class="shoujihao">15425468521</span>
                <span class="dizhi">山东省 青岛市 市北区 镇江路街道 山东省青岛市市南区镇江路67号3单元202</span>
                <button class="bianji" type="button">编辑</button>
            </div>
            <div class="jutidizhi">
                <span class="xing"></span>
                <span class="xingming">王新</span>
                <span class="shoujihao">15156468521</span>
                <span class="dizhi">山东省 青岛市 市南区 镇江路街道 山东省青岛市市南区镇江路67号3单元202</span>
                <button class="bianji" type="button">编辑</button>
            </div>
            <div class="jutidizhi">
                <span class="xing"></span>
                <span class="xingming">张飞</span>
                <span class="shoujihao">15335468521</span>
                <span class="dizhi">山东省 青岛市 市北区 镇江路街道 山东省青岛市市南区镇江路67号3单元202</span>
                <button class="bianji" type="button">编辑</button>
            </div>
        </div>

 

<script src="js/mui.min.js"></script>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            mui.init();
            
            mui("#tianjiadizhi")[0].addEventListener('tap',function(){
                mui.openWindow({  
                    url: "tianjiadizhi.html",
                })
            })
          
            $(".jutidizhi").each(function(){
//                $(this).children(".xing").html($(this).children(".xingming").html().substring(0,1));
                var xing = $(this).children(".xingming").text().substring(0,1);
                $(this).children(".xing").html(xing);
            })
        </script>

效果图:

这篇关于js遍历多个div并自动获取姓名的姓氏填入span的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/371286

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Codeforces Round #240 (Div. 2) E分治算法探究1

Codeforces Round #240 (Div. 2) E  http://codeforces.com/contest/415/problem/E 2^n个数,每次操作将其分成2^q份,对于每一份内部的数进行翻转(逆序),每次操作完后输出操作后新序列的逆序对数。 图一:  划分子问题。 图二: 分而治之,=>  合并 。 图三: 回溯:

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

Codeforces Round #261 (Div. 2)小记

A  XX注意最后输出满足条件,我也不知道为什么写的这么长。 #define X first#define Y secondvector<pair<int , int> > a ;int can(pair<int , int> c){return -1000 <= c.X && c.X <= 1000&& -1000 <= c.Y && c.Y <= 1000 ;}int m

Codeforces Round #113 (Div. 2) B 判断多边形是否在凸包内

题目点击打开链接 凸多边形A, 多边形B, 判断B是否严格在A内。  注意AB有重点 。  将A,B上的点合在一起求凸包,如果凸包上的点是B的某个点,则B肯定不在A内。 或者说B上的某点在凸包的边上则也说明B不严格在A里面。 这个处理有个巧妙的方法,只需在求凸包的时候, <=  改成< 也就是说凸包一条边上的所有点都重复点都记录在凸包里面了。 另外不能去重点。 int

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

Python3 BeautifulSoup爬虫 POJ自动提交

POJ 提交代码采用Base64加密方式 import http.cookiejarimport loggingimport urllib.parseimport urllib.requestimport base64from bs4 import BeautifulSoupfrom submitcode import SubmitCodeclass SubmitPoj():de

leetcode105 从前序与中序遍历序列构造二叉树

根据一棵树的前序遍历与中序遍历构造二叉树。 注意: 你可以假设树中没有重复的元素。 例如,给出 前序遍历 preorder = [3,9,20,15,7]中序遍历 inorder = [9,3,15,20,7] 返回如下的二叉树: 3/ \9 20/ \15 7   class Solution {public TreeNode buildTree(int[] pr