Question

我试图遍历包含所有元素的div。问题是，我的示例中显示了相同的结果。

所以我的例子的html结构如下：

<div class="somediv">
    <span>hello</span>
    <img src="someimg.jpg" width="20" height="20" />
    <p></p>
    <div><p>some text in a paragraph inside a div</p></div>
    <h2>Some h2 tekst</h2>
    <table>
        <tbody>
            <tr>
                <td>some text in a table cell</td>
            </tr>
        </tbody>
    </table>
</div>

我的目标是获取html标签内的所有内容。像这样，

tagtype: <span>, text: 'hello',
tagtype: <p>, text: 'some text in a paragraph inside a div'
etc.

有谁知道如何正确地做到这一点？

Answer 1

试试这个：

$('.somediv *').each(function() {
    var hastext = $(this).text().length != 0;
    if(hastext) {
        console.log("type: " + $(this)[0].tagName + " text: " + $(this).text());
    }
});

DEMO：http://jsfiddle.net/JLtCN/1/

如果你想摆脱欺骗，只需将记录的项目存储在一个数组中，然后在记录之前检查它是否不在数组中，如：

此外，它现在以相反的顺序执行它们，因此您只获得最低的子实例：

var addedItems = new Array();

$.each($('.somediv *').toArray().reverse(), function() {
    var hastext = $(this).text().length != 0;
    if(hastext && addedItems.indexOf($.trim($(this).text())) == -1) {
        addedItems.push($.trim($(this).text()));
        console.log("type: " + $(this)[0].tagName + " text: " + $(this).text());
    }
});

DEMO：http://jsfiddle.net/JLtCN/3/

Answer 2

这样的事情：

var seenStrings = [],
    content = $.map(
        $(".somediv *"),
        function(element) {
            var text = $(element).text();
            if ($.inArray(text, seenStrings) !== -1) {
              return {
                  tagname: "<" + element.nodeName.toLowerCase() + ">",
                  text: $(element).text()
              };
            } else {
              return null;
            }
        }
    );

Answer 3

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

walk_the_DOM(document.body, function(node) {
    if(node.nodeType == 1){
        document.write(node.nodeName + ": " );
    }        
    if(node.nodeType == 3){
        document.write(node.nodeValue +" <br/>");
    }
});

如何遍历div中的所有元素并查找包含文本的标记

3 个答案: