How to get a specific element using jquery?

Question

I'm trying to get the div element which has the class repeat. So I tried this, but it shows undefined.

var data = '<div class="test form-group col-xs-6 repeat" id="repeat_py">\n <div class="kv col-lg-2">index:\n<pre class="num">0</pre></div>\n<div><span class="kv">value: <pre class="num">m</pre></span></div></div>'

alert($(data).find('div.repeat').html())

Fiddle

You know that data is a string in this context, right? So you need to parse it — Adam Azad
– Adam Azad, Commented Jan 23, 2016 at 8:09
tried this alert($(data).html().find('div.repeat').html()) — Avinash Raj
– Avinash Raj, Commented Jan 23, 2016 at 8:09
Simpler is to append in body using $('body').append(data) and then find or simpler $('.repeat') — Sap
– Sap, Commented Jan 23, 2016 at 8:10

T.J. Crowder · Accepted Answer · 2016-01-23 08:14:17Z

6

You need .filter() instead of .find()

Reduce the set of matched elements to those that match the selector or pass the function's test.

 $(data).filter('div.repeat').html()

var data = '<div class="test form-group col-xs-6 repeat" id="repeat_py">\n <div class="kv col-lg-2">index:\n<pre class="num">0</pre></div>\n<div><span class="kv">value: <pre class="num">m</pre></span></div></div>'

alert($(data).filter('div.repeat').html())

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

edited Jan 23, 2016 at 8:14

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

answered Jan 23, 2016 at 8:11

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

2 Comments

Avinash Raj Over a year ago

thought find helps to find the corresponding element. Then what's the use of find?

Satpal Over a year ago

@AvinashRaj, find() searches in descendant of elements, where as filter() filters in the elements i.e. $(data)

gurvinder372 · Accepted Answer · 2016-01-23 08:11:43Z

1

replace find with filter

alert($(data).filter('div.repeat').html())

find looks for children, filter looks at the sibling level

answered Jan 23, 2016 at 8:11

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

Adam Azad · Accepted Answer · 2016-01-23 08:12:28Z

0

Try this

var data = '<div class="test form-group col-xs-6 repeat" id="repeat_py">\n <div class="kv col-lg-2">index:\n<pre class="num">0</pre></div>\n<div><span class="kv">value: <pre class="num">m</pre></span></div></div>';
 
var HTMLobject = $('<div/>').html(data);
console.log(HTMLobject.find('div.repeat').html());
alert(HTMLobject.find('div.repeat').html());

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

answered Jan 23, 2016 at 8:12

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

Comments

Hitesh Hadiya · Accepted Answer · 2016-01-23 08:15:05Z

0

You can simply try with this alert($(data).html());

answered Jan 23, 2016 at 8:15

Hitesh Hadiya

1,0731 gold badge9 silver badges19 bronze badges

Comments

samumaretiya · Accepted Answer · 2016-01-23 08:19:06Z

0

you are just missing wrapper class here that's why you got an error as undefined

try the following code

	var data = '<div><div class="test form-group col-xs-6 repeat" id="repeat_py">\n <div class="kv col-lg-2">index:\n<pre class="num">0</pre></div>\n<div><span class="kv">value: <pre class="num">m</pre></span></div></div></div>'
alert($(data).find('div.repeat').html())

This give me perfect alert

answered Jan 23, 2016 at 8:19

samumaretiya

1,1757 silver badges18 bronze badges

Comments

smirfan · Accepted Answer · 2016-01-23 08:48:35Z

0

ALternate solution:

var data = '<div class="test form-group col-xs-6 repeat" id="repeat_py">\n <div class="kv col-lg-2">index:\n<pre class="num">0</pre></div>\n<div><span class="kv">value: <pre class="num">m</pre></span></div></div>'
$('body').append(data);
alert($('body').find('div.repeat').html());

Fiddle link

https://jsfiddle.net/fgf9nyn0/18/

answered Jan 23, 2016 at 8:48

smirfan

263 bronze badges

Collectives™ on Stack Overflow

How to get a specific element using jquery?

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related