jquery 遍历 div 并获取其跨度详细信息

Posted 2023-05-09

【中文标题】jquery 遍历 div 并获取其跨度详细信息

【英文标题】：jquery to traverse the div and get its span details

【发布时间】：2011-03-25 09:29:21

【问题描述】：

我有一个html页面如下：

<div id="test1">
    <table>
        <tr>
            <td><span id="234">ABKO</span></td>
        </tr>
        <tr>
            <td><span id="1234">ABKO2</span></td>
        </tr>
        <tr>
            <td><span id="2634">ABKO3</span></td>
        </tr>
    </table>    
</div>
<div id="test2">
    <table>
        <tr>
            <td><span id="233">ABKOw</span></td>
        </tr>
        <tr>
            <td><span id="1236">ABKOc</span></td>
        </tr>
        <tr>
            <td><span id="2635">ABKOv</span></td>
        </tr>
    </table>    
</div>

如何获取使用 jQuery 之间的所有跨度详细信息？ 例如，如果我首先考虑 div=test1 那么我想要所有带有 ID 和文本的 soan 作为 div -> 测试1 跨度 => id 233 && ABKO 跨度 => id 1234 && ABKO2 跨度 => id 22634 && ABKO3

【问题讨论】：

以数字开头的 ID 不是有效的 HTML。它必须以字母开头。

【参考方案1】：

您可以像这样遍历所有 <span> 元素：

$('div span').each(function()
    var $span = $(this);

    var divId = $span.closest('div').attr('id');
    var spanId = $span.attr('id');
    var spanTxt = $span.text()

    // do something with the above
);

你可以看到in action here。

这样做是构建一个嵌套在 div 中的 span 元素列表 (CSS selectordiv span)。然后它使用.each() 方法遍历这个列表。

在每次迭代中，$(this) 指的是匹配的 span 元素。我们在$span 变量中捕获了一个引用，因此我们不会一直重新创建相同的jQuery 对象。

然后我们使用.closest() 方法来查找与给定选择器（div）匹配的跨度的第一个祖先。这得到了我们的父 div。

最后.attr()和.text()得到了ID属性和文本值。

【参考方案2】：

您可以通过 Id 找到具有 $('#test1') 之类的元素。您可以使用$('span') 或$('div') 按标签查找元素。

如果要查找属于“test1”的所有跨度：

$('#test1').find('span')

或

$('#test1 span')

您可以使用each() 遍历元素集合：

$('#test1').find('span').each(function()  
    var id = this.id;
    var value = $(this).html();
    // do whatever...
);

希望您可以自己解决剩下的问题。