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 - ＆gt; TEST1 跨度=＆gt; id 233＆amp;＆amp; ABKO 跨度=＆gt; id 1234＆amp;＆amp; ABKO2 跨度=＆gt; id 22634＆amp;＆amp; 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）匹配的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...
});

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

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

2 个答案: