使用jQuery each函数修改外部div内容失败，求排查错误

我尝试用jQuery的each函数修改外部HTML中div的内容，预期是把.example2下的span标签内容依次设置为ExampleDesc1、ExampleDesc2、ExampleDesc3……但代码跑不起来。以下是我的代码：

<div class="example1">
    <a href="#" description"ExampleDesc1"></a>
    <a href="#" description"ExampleDesc2"></a>
    <a href="#" description"ExampleDesc3"></a>
    <a href="#" description"ExampleDesc4"></a>
    <a href="#" description"ExampleDesc5"></a>    
</div>

<div class="example2">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<script type="text/javascript">
    var desc;
    $('.example1 a').each(function () {
        var desc = $(this).attr('description');

        $('.example2 span').each(function () {
            $(this).html(desc);
        });
    });    
</script>

请问代码里的错误在哪里？

嘿，我来帮你揪出问题根源，主要有两个关键错误：

1. HTML属性语法错误 #

你写的<a href="#" description"ExampleDesc1"></a>里，description属性的写法不符合规范——缺少了等号！正确的HTML属性格式是属性名="属性值"，所以要改成：

<a href="#" description="ExampleDesc1"></a>

所有a标签都要修正这个语法问题，不然jQuery根本读不到description属性的值。

2. 嵌套each循环的逻辑错误 #

你当前的代码逻辑是：遍历每个a标签时，把所有span都设置成当前a的描述。这样循环结束后，所有span都会被最后一个a的ExampleDesc5覆盖，完全达不到“依次对应”的效果。

正确的思路是按索引一一对应：拿到每个a的描述，把它放到同位置的span里。你可以利用each函数自带的第二个参数（索引值）来实现：

修正后的完整代码： #

<div class="example1">
    <a href="#" description="ExampleDesc1"></a>
    <a href="#" description="ExampleDesc2"></a>
    <a href="#" description="ExampleDesc3"></a>
    <a href="#" description="ExampleDesc4"></a>
    <a href="#" description="ExampleDesc5"></a>    
</div>

<div class="example2">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<script type="text/javascript">
    // 先获取所有span元素，避免每次循环重复查询DOM，提升性能
    var $spans = $('.example2 span');
    
    $('.example1 a').each(function (index) {
        // index是当前a标签在集合里的位置（从0开始）
        var desc = $(this).attr('description');
        // 把对应索引的span设置内容
        $spans.eq(index).html(desc);
    });    
</script>

另外补充个小建议：description不是HTML标准属性，推荐用data-*自定义属性，比如data-description="ExampleDesc1"，然后用$(this).data('description')读取，这样更符合Web规范哦。

内容的提问来源于stack exchange，提问作者wpdev