find不能使用类名

时间:2014-02-11 12:34:09

标签: javascript jquery

我是新手

我试图通过使用以下代码来获取两种形式的长度,但它似乎不起作用。我不知道它出了什么问题,或者我在这里犯了什么错误..

  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.');

演示http://jsbin.com/loyuv/3/edit 提前致谢

3 个答案:

答案 0 :(得分:3)

您可以使用以下内容;

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.');

以下是工作演示: http://jsfiddle.net/Bntr3/

<强>更新

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

转换将当前的html字符串括起来<div></div>。因此,您的find()方法将适用于最新的html字符串

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

如果您不想修改html字符串,可以使用.filter()之类的

 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.');

以下是工作演示: http://jsfiddle.net/Bntr3/2/

答案 1 :(得分:2)

来自documentation

  

获取当前匹配组中每个元素的后代   元素,由选择器,jQuery对象或元素过滤。

find看起来里面 jQuery集合的元素。你需要包装整体才能找到你的顶级元素:

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

答案 2 :(得分:0)

对您的代码进行了一些更改,请点击此处

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.');

在此处查看演示http://jsbin.com/loyuv/5/edit?html,js,output