发表新帖
发表新帖

Use Jquery Selectors on $.AJAX loaded HTML?

前端 未结
关注
9 787
没有蜡笔的小新
没有蜡笔的小新 2020-11-27 11:30

I have

$.ajax({
  url: identity,
  success: function(data) { ProcessIdentityServer(data) }
});

When \'data\' is returned, is there a way to

相关标签:
9条回答
  • 庸人自扰
    2020-11-27 12:10

    This is the same as the accepted answer but with some extra explanation.

    You may use the jQuery context parameter Link to docs

    I can't really explain better than the documentation.

    Selector Context

    By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function

    The context parameter has been around since jQuery v1.0

    Therefore a solution to the OP's example to "get all the href values of any LINK tags contained in the HTML held in 'data' without adding it to the DOM first" would be:

    success: function(data){
    $("a", data).each(function(){
        console.log( $(this).attr("href") );
    });
}
    0 讨论(0)
  • 猫巷女王i
    2020-11-27 12:10

    my ultimate solution was

    jQuery.ajax({
    url: "/some-url",
    cache: false,
    dataType: "html",
    success: function(data) {
        jQuery("#target").html( jQuery(data).find('#ajax-data'));
    }
});
    0 讨论(0)
  • 渐次进展
    2020-11-27 12:17

    Before beginning, let's take a quick look at what jQuery does to a basic HTML page returned from an $.ajax() call, and converting the returned data into a jQuery object.

    $.ajax({
    dataType : 'html',
    url      : 'path/to/example-page.html',
    success  : function(data) {

        // log the result of the data converted into a jquery object.
        console.log( $(data) );

    }
});

    Here's what you would expect to see:

    [

    0         <TextNode textContent="\n\n\n\n\n ">
    1         title
    2         <TextNode textContent="\n ">
    3         meta
    4         <TextNode textContent="\n\n\n\n\n">
    5         div#container
    6         Comment { data=" #container ", length=12, nodeName="#comment", more...}
    7         <TextNode textContent="\n\n">
    jquery    "1.6.4"
    length    8
    selector  ""

    // additional data and functions removed for brevity

]

    YIKES! That's quite ugly! Attempting to do anything with that can yield results, but you need to know what the data structure looks like every single time, and where the data lie within that object. Is that data at the root, or is it buried within?

    Like previous posters have mentioned, you can use .filter(), but the root is as far as that search will go, because you're simply filtering the returned results. However, if you were to use .find() at this point and the element you wanted is at the root, you'll receive an empty set, but anything buried beyond the root will be found.

    So, why be pinned down to needing to know what that data structure looks like with 100% certainty, and why bother going through all the trouble of having to use multiple .filter() and .find() calls, and dare I say an .each() loop? Yuck! That's just simply too much work and takes way too much time.

    If you want to .find() a particular HTML element returned from an .ajax() call, start with the following line:

    var response = $('<html />').html(data);

    Can it really be that easy? In fact, yes it is! What's happening here is that a new <html> element is being created and converted into a jQuery object. This is used a starting location to insert the returned HTML from an .ajax() call. It's kind of like doing $('html') on a webpage. With this, you can begin finding elements.

    response.find( ... ); // any jquery selector in place of the ellipsis.

    Here's an example that uses the original poster's question:

    $.ajax({
    dataType : 'html',
    url      : 'path/to/example-page.html',
    success  : function(data) {

        // set the returned contents in a new base <html> tag.
        var response = $('<html />').html(data),
            anchors, hrefValuesList = [ ],
            i, end;

        // now you can search the returned html data using .find().
        anchors = response.find('a');

        // grab all your href values from each anchor element.
        end = anchors.length;
        for (i = 0; i < end; i++) {
            hrefValuesList.push( anchors[ i ].href );
        }

        // continue processing the data as necessary...

    }
});

    Obviously the above will need some refining if you want to filter out any unwanted content, or want to refine the values returned.

    With that, you could see something like the following example array returned:

    [ "http://stackoverflow.com/", "http://www.google.com/" ] // and so on...

    Using this approach, you can easily use the power of .find() on any HTML data returned through the $.ajax() function like you already do on any elements you find in the DOM. The real bonus is that you aren't directly manipulating the DOM to find or do what you want, which is an expensive process.

    Happy scrubbing! =)

    0 讨论(0)
  • 梦如初夏
    2020-11-27 12:17

    You can also use context now (don't know when this was introduced):

    $.get('some/url', '',
    function (data) {
        $("#domelement", data);
    }
);
    0 讨论(0)
  • 南笙
    2020-11-27 12:23

    Presuming that data is a string of HTML, you can do this:

    $(data).find('a');

    That will return the links without adding the data to the DOM.

    0 讨论(0)
  • 野性不改
    2020-11-27 12:26

    One note I will add which is from a similar problem on here is that if your AJAX returns the following:

    <div class="test">Hello</div>
<div class="one">World</div>

    The following jQuery Won't work:

    $(data).find('div.test');

    as the divs are top level elements and data isn't an element but a string, to make it work you need to use .filter

    $(data).filter('div.test');
    0 讨论(0)
 看不清?
提交回复
热议问题