使用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获取两个标签之间所有的详细信息？ 例如，如果我考虑第一个

为test1，则我想要所有带有其ID和文本的 如下： div -> test1 Span => id 233 && ABKO Span => id 1234 && ABKO2 Span => id 22634 && ABKO3

- user367134

---

以数字开头的ID是无效的HTML。它必须以字母开头。 - user113716

Answer 1

您可以按以下方式遍历所有元素：

$('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中的span元素列表（CSS选择器 div span）。然后使用.each()方法遍历这个列表。

在每次迭代中，$(this)指的是匹配的span元素。我们将引用保存在$span变量中，以便不再重复创建jQuery对象。

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

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

- Pat

Answer 2

您可以通过类似于$('#test1')的方式按ID查找元素。您可以使用$('span')或$('div')按标签查找元素。

如果您想查找属于“test1”的所有：

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

或者

$('#test1 span')

您可以使用each()迭代元素集合：

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

希望您能从这个中自行解决其余问题。

- fearofawhackplanet