CODEWITHSUNDEEP
javascriptjquery
Kalpit
Kalpit

Reputation: 4936

find is not working with class name

i am newbie here

i am trying to get length of two forms by using following code but its not working it seems. i don't know whats going wrong with it or what mistake i made here..

  var a = "<div class='controls'><input type='text' name='abc'></div><div class='controls'><input type='email' name='abc'></div>";

  var b = "<div class='controls'><input type='text' name='abc'></div><div class='controls'><input type='email' name='abc'></div>";

  var add = $(a);
  var edit = $(b);

  alert(add.find('.controls').length); //its always returning 0

if(add.find('.controls').length != edit.find('.controls').length)
  alert('There is change in number of divs.');
else
   alert('no change.');

Demo http://jsbin.com/loyuv/3/edit Thanks in advance

Upvotes: 0

Views: 89

Answers (3)

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

You can use following;

var a = "<div class='controls'><input type='text' name='abc'/></div><div class='controls'><input type='email' name='abc'/></div>";

var b = "<div class='controls'><input type='text' name='abc'></div><div class='controls'><input type='email' name='abc'></div>";

var add = $("<div>", {
    html: a
});
var edit = $("<div>", {
    html: b
});
alert(add.find('.controls').length); //its always returning 0
if (add.find('.controls').length != edit.find('.controls').length)
    alert('There is change in number of divs.');
else
    alert('no change.');

Here is working demo: http://jsfiddle.net/Bntr3/

Update:

var add = $("<div>", {
        html: a
    });

Converts enclose your current html string by <div></div>. So, your find() method will work on latest html string 

<div>
<div class='controls'><input type='text' name='abc'/></div><div class='controls'><input type='email' name='abc'/></div>
</div>

If you do not want to modify your html string, you can use .filter() like

 var a = "<div class='controls'><input type='text' name='abc'/></div><div class='controls'><input type='email' name='abc'/></div>";

  var b = "<div class='controls'><input type='text' name='abc'></div><div class='controls'><input type='email' name='abc'></div>";

var add = $(a);
  var edit = $(b);
  alert(add.filter('.controls').length); //its always returning 0
if(add.find('.controls').length != edit.find('.controls').length)
  alert('There is change in number of divs.');
else
   alert('no change.');

Here is working demo: http://jsfiddle.net/Bntr3/2/

Upvotes: 3

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382112

From the documentation :

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

find looks inside the elements of the jQuery collection. You need to wrap the whole to be able to find your top level elements :

var add = $('<div>'+a+'</div>');

Upvotes: 2

Karthick Kumar
Karthick Kumar

Reputation: 2361

had done some changes to your code please check here 

var a = "<div id='a'><div class='controls'><input type='text' name='abc'></div><div class='controls'><input type='email' name='abc'></div></div>";
  var b = "<div id='b'><div class='controls'><input type='text' name='abc'></div><div class='controls'><input type='email' name='abc'></div><div class='controls'><input type='email' name='abc'></div></div>";

    var add = $(a);
    var edit = $(b);

if(add.find('.controls').length != edit.find('.controls').length)
    alert('There is change in number of divs.');
else
    alert('no change.');

see demo here http://jsbin.com/loyuv/5/edit?html,js,output

Upvotes: 0

Related Questions