How to find a specified HTML element on a string

Question

I am trying to "encapsulate" a web into a phonegap app, but I am finding a problem. When I make a request to the server it answer me with the html as a text, and I want to take some html elements of this text and append on a div of the index.html of the application. To make this I do so:

jQuery.get(rute, function(htmlTemplate) 
{
    var data = jQuery(htmlTemplate).find('#wrapper');
    //make a small treatment to data, but not yet.
    jQuery('body').html(data)
});

I have other application where I do something similar:

function loadPage(placeToLoad, rute, callback) 
{
    jQuery.get(rute, function(htmlTemplate) 
    {
        var data = jQuery(htmlTemplate).find('#wrapperApp').parent(); 
        if(data.html()!==undefined)
        {
            placeToLoad.html(data);
            data = eraseNoScriptExternalPages(data);
            data = eraseStylesExternalPages(data);
            data = eraseLinksExternalPages(data);
            makeImageScroll(data);
        }
        else
            placeToLoad.html(htmlTemplate);     
        if (callback!=undefined && typeof(callback)==typeof(Function)) 
            callback();
    });
}

In this second case I need to differentiate between the pages that came from a external server (which must be engineered to not cause collateral damage), and local pages.

The case is that the second case works and the first not!!! why!!??

I was trying to make a simple test:

var html = '<head><style> body{background-color:rgba(128,128,128,0.3);}</style> </head> <body> <div id="test">HOLA</div> </body>';
jQuery("#content").html(jQuery(html).find("#test").html());

...but doesn´t work.

I want to choose a specific element to make the small treatment (erase any divs or an aside section).

rjdown · Accepted Answer · 2014-10-23 23:01:15Z

1

jQuery(a).find(b) will only find b that is a descendent of a. In your example, #test is the root node, so it's both a and b, so there will be no matches.

Instead, you can use .filter():

var html = '<head><style> body{background-color:rgba(128,128,128,0.3);}</style> </head> <body> <div id="test">HOLA</div> </body>';
jQuery("#content").html(jQuery(html).filter("#test").html());

http://jsfiddle.net/gg5r6mqp/

edited Oct 23, 2014 at 23:01

answered Oct 23, 2014 at 22:52

rjdown

9,2073 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhasyakarulu Kottakota · Accepted Answer · 2014-10-23 22:39:13Z

1

Hopefully this can helps for you. Here I have created temporary DOM object and querying against that:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var html = '<head><style> body{background-color:rgba(128,128,128,0.3);}</style> </head> <body> <div id="test">HOLA</div> </body>';
            var mydiv = document.createElement('div');
            mydiv.innerHTML = html;

            alert(jQuery($(mydiv)).find("#test").html());
        });

    </script>
</head>
<body>
</body>
</html>

answered Oct 23, 2014 at 22:39

Bhasyakarulu Kottakota

8331 gold badge6 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to find a specified HTML element on a string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related