javascript - Find elements inside Data object of jQuery .get() - Stack Overflow

admin管理员组

文章数量:1399984

I thought this would be easier to find :)

$.get('/page.html', function(data) {
    //get only contents of class="contents"
});

I can't seem to find out how to do that.

I thought this would be easier to find :)

$.get('/page.html', function(data) {
    //get only contents of class="contents"
});

I can't seem to find out how to do that.

• javascript
• jquery
• xmlhttprequest

Share Improve this question Follow edited Apr 6, 2013 at 4:01 Ian 50.9k1313 gold badges104104 silver badges111111 bronze badges asked Apr 6, 2013 at 3:56 WesleyWesley 5,62099 gold badges4646 silver badges7272 bronze badges 3

• 1 can you please elaborate what do you exactly mean by "get only contents of class='contents'" – Ali Shah Ahmed Commented Apr 6, 2013 at 3:59
• Sure. The page in question has a lot of generated code I want to ignore. I only want to get back a specific section of the page I'm loading. – Wesley Commented Apr 6, 2013 at 4:00
• @dinjas Logging it out just shows me the entire page. How do I convert the returned data into an object that allows me to select a specific element? – Wesley Commented Apr 6, 2013 at 4:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I would do something like this...

$.get('/page.html', function(data){
   var $page = $(data)
   var $contents = $page.filter('.contents'); /* this will get a reference to the .contents */
   /* do more stuff here 
      ....  
   */
});

Have a look at the accepted answer to this SO: Get HTML of div element returned by .get with jQuery

If the structure of the returned content is uncertain (to where sometimes you would need to use .find() due to .contents being a descendent, you could always perform a check and run .filter() or vice versa.

Example:

$contents = $page.filter('.contents');
if($contents.length == 0) {
   $contents = $page.find('.contents');
}

Just a thought based on the ments posted in other answers.

If you create a jQuery object from the returned data and the wrapper element in the jQuery set is .contents element then find fails to find the target element and if the contents element is a descendant element then filter method fails to select that element. You can create a dummy element, populate it with returned data and use find method.

$.get('/page.html', function(data) {
    var element = $('<div/>').html(data).find('.contents');
});

Just use .find():

$(data).find(".contents")

Here's the final code you could use:

$.get('/page.html', function(data) {
    var contents = $(data).find(".contents");
});

Then depending on what type of element the .contents is, you could use contents.html() or contents.text() (most elements), or contents.val() (input element).

Technically, another idea is to use .filter().

This all depends on the structure of your HTML in data. If your structure is like this:

<div id="main">
    blah blah
    <div class="contents"></div>
</div>

Then the result of $(data) will be [#main] and you need to use find. If your structure is like:

<div id="main"><div>
<div class="contents"></div>
<div class="another"></div>

Then the result of $(data) will be [#main, .contents, .another] and you need to use filter.

Of course, bining them, it could be:

$.get('/page.html', function(data) {
    var all = $(data), contents;
    contents = all.filter(".contents");
    if (!contents.length) {
        contents = all.find(".contents");
    }
    if (contents.length) {
        // It/they was/were found at some point
    }
});

本文标签： javascriptFind elements inside Data object of jQuery get()Stack Overflow