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 - > test1 Span => id 233 && ABKO Span => id 1234 && ABKO2 Span => 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
});

你可以在这里看到它.

这样做是建立一个嵌套在div(CSS选择器 div span)中的span元素列表.然后使用.each()方法迭代此列表.

在每次迭代中,$(this)指的是匹配的span元素.我们捕获$span变量中的引用,因此我们不会继续重新创建相同的jQuery对象.

然后我们使用.closest()方法来查找与给定selector(div)匹配的span的第一个祖先.这得到我们的父div.

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

Answer 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...
});

希望你可以自己解决这个问题.