jQuery - selectors on a html string

Question

I am going to get a element from a html-string with jQuery, but I always get an undefined in my console. My String is:

<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>

and I want to get the td.test.

I've tested:

console.log($('.test', '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').innerHTML);
console.log($('.test', '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').html());
console.log($('.test', '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').first().innerHTML);

and some more, but nothing works :/

Does anyone know a solution for my problem?

Can you show me where it's documented that jQuery should be able to accept arbitrary HTML as the second argument to $? — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Mar 4, 2012 at 0:38

Ry- · Accepted Answer · 2017-04-09 10:20:20Z

63

First, use jQuery.parseHTML to parse the HTML into an array of elements; then you’ll be able to convert it to a jQuery collection and use filter to restrict the collection to elements matching a selector.

var html =
    '<td class="test">asd</td>' +
    '<td class="second">fgh</td>' +
    '<td class="last">jkl</td>';

var text = $($.parseHTML(html)).filter('.test').text();

console.log(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Apr 9, 2017 at 10:20

answered Mar 4, 2012 at 0:42

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

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

1 Comment

Binar Web Over a year ago

parseHTML is no longer necessary, it will work without it (jQuery > 3.5)

Charles Goodwin · Accepted Answer · 2018-03-01 10:32:56Z

10

You can't use jQuery selectors on a collection of nodes like this. You can wrap in a single node to work around this, so just add e.g. a wrapping <tr> node.

var htmlBits = '<tr>'
  + '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>'
  + '</tr>';

And then it will work:

console.log($('.test', htmlBits).text()); // outputs 'asd'

JSFiddle (remember to view the console to see the log).

answered Mar 1, 2018 at 10:32

Charles Goodwin

6,6923 gold badges37 silver badges64 bronze badges

Comments

J. Bruni · Accepted Answer · 2012-03-04 00:54:36Z

4

Try:

console.log($('<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').filter('.test').html());

or:

console.log($('.test', '<table><td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td></table>').html());

answered Mar 4, 2012 at 0:54

J. Bruni

20.5k13 gold badges80 silver badges93 bronze badges

Comments

juanmf · Accepted Answer · 2015-10-05 16:16:47Z

2

I have a response that is of the form:

<div>...
</div>

<div>...
</div>

<div>...
</div>

And @minitech 's method resulted in an array of HTML nodes in which the selector didn't work.

So I tried this and it worked out nice:

$.ajax({
    url:
    success: function($data) {
         var $parsed_data = $('<div/>').append($data);
         var found = $parsed_data.find(".Selector");
         ...
    }
});

answered Oct 5, 2015 at 16:16

juanmf

2,0043 gold badges26 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery - selectors on a html string

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related