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

Question

我有一个 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 那么我想要所有 soan 及其 ID 和文本作为div -> 测试1 跨度 => id 233 && ABKO 跨度 => id 1234 && ABKO2 跨度 => id 22634 && ABKO3

Answer 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 ( CSS selector div span ) 中的 span 元素列表。然后，它使用 .each() 迭代此列表。方法。

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

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

最后.attr()和 .text()获取ID属性和文本值。