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

相关文章

Python版本信息获取方法详解与实战

《Python版本信息获取方法详解与实战》在Python开发中,获取Python版本号是调试、兼容性检查和版本控制的重要基础操作,本文详细介绍了如何使用sys和platform模块获取Python的主... 目录1. python版本号获取基础2. 使用sys模块获取版本信息2.1 sys模块概述2.1.1

Java发送SNMP至交换机获取交换机状态实现方式

《Java发送SNMP至交换机获取交换机状态实现方式》文章介绍使用SNMP4J库(2.7.0)通过RCF1213-MIB协议获取交换机单/多路状态,需开启SNMP支持,重点对比SNMPv1、v2c、v... 目录交换机协议SNMP库获取交换机单路状态获取交换机多路状态总结交换机协议这里使用的交换机协议为常

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

在Node.js中使用.env文件管理环境变量的全过程

《在Node.js中使用.env文件管理环境变量的全过程》Node.js应用程序通常依赖于环境变量来管理敏感信息或配置设置,.env文件已经成为一种流行的本地管理这些变量的方法,本文将探讨.env文件... 目录引言为什么使php用 .env 文件 ?如何在 Node.js 中使用 .env 文件最佳实践引

JAVA实现Token自动续期机制的示例代码

《JAVA实现Token自动续期机制的示例代码》本文主要介绍了JAVA实现Token自动续期机制的示例代码,通过动态调整会话生命周期平衡安全性与用户体验,解决固定有效期Token带来的风险与不便,感兴... 目录1. 固定有效期Token的内在局限性2. 自动续期机制:兼顾安全与体验的解决方案3. 总结PS

MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

《MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决》MyBatis默认开启一级缓存,同一事务中循环调用查询方法时会重复使用缓存数据,导致获取的序列主键值均为1,... 目录问题原因解决办法如果是存储过程总结问题myBATis有如下代码获取序列作为主键IdMappe

C#使用iText获取PDF的trailer数据的代码示例

《C#使用iText获取PDF的trailer数据的代码示例》开发程序debug的时候,看到了PDF有个trailer数据,挺有意思,于是考虑用代码把它读出来,那么就用到我们常用的iText框架了,所... 目录引言iText 核心概念C# 代码示例步骤 1: 确保已安装 iText步骤 2: C# 代码程

使用Node.js和PostgreSQL构建数据库应用

《使用Node.js和PostgreSQL构建数据库应用》PostgreSQL是一个功能强大的开源关系型数据库,而Node.js是构建高效网络应用的理想平台,结合这两个技术,我们可以创建出色的数据驱动... 目录初始化项目与安装依赖建立数据库连接执行CRUD操作查询数据插入数据更新数据删除数据完整示例与最佳

Spring Boot中获取IOC容器的多种方式

《SpringBoot中获取IOC容器的多种方式》本文主要介绍了SpringBoot中获取IOC容器的多种方式,包括直接注入、实现ApplicationContextAware接口、通过Spring... 目录1. 直接注入ApplicationContext2. 实现ApplicationContextA

linux部署NFS和autofs自动挂载实现过程

《linux部署NFS和autofs自动挂载实现过程》文章介绍了NFS(网络文件系统)和Autofs的原理与配置,NFS通过RPC实现跨系统文件共享,需配置/etc/exports和nfs.conf,... 目录(一)NFS1. 什么是NFS2.NFS守护进程3.RPC服务4. 原理5. 部署5.1安装NF