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

Question

I tried to loop through a div that contains all kind of elements. The problem is, that I get the same results showing up in my example.

Here is the fiddle with the example code: http://jsfiddle.net/JLtCN/

So the html structure of my example looks like:

<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>

My goal was to get all the content inside the html tags. like so,

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

Does anyone know how to do this correctly?

Answer 1

Try this:

$('.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/

If you want to get rid of the dupes, simply store the logged items in an array and then check if it's not in the array before logging, something like:

Also, it now does them in reverse order so you get the lowest child instances only :

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

Something like this:

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/>");
    }
});