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>

效果图: