Question

当我执行以下代码时，它的行为与我预期的一样（记录DIV元素的内容）：

var html = '<form action="/" method="get" name="myform"><div>123</div></form>';
console.log($('div', html));

我无法理解以下代码无效的原因：

var html = '<form action="/" method="get" name="myform"><div>123</div></form>';
console.log($('form', html));

它们看起来是一样的，那么为什么DIV选择器在FORM选择器没有时会起作用？

Answer 1

很简单，第二个例子不起作用，因为没有元素可以在字符串的上下文中找到，而在第一个例子中，是存在于字符串上下文中的div。

在jQuery中，格式$('div', html)表示在html变量的上下文中找到div元素。它相当于$(html).find('div')。见http://api.jquery.com/jQuery/#expressioncontext


选择器上下文   默认情况下，选择器在DOM开始时执行搜索   在文档根目录。但是，可以给出替代上下文   通过使用可选的第二个参数到$（）函数进行搜索。   例如，要在事件处理程序中进行搜索，搜索可以是   像这样限制：

$( "div.foo" ).click(function() { $( "span", this ).addClass( "bar" ); });

当搜索范围选择器仅限于上下文时   这样，只有点击元素中的跨度才能获得额外的元素   类。

在内部，选择器上下文是使用.find（）方法实现的，   因此$( "span", this )相当于$( this ).find( "span" )。

由于你的第二个例子在中没有字符串的内容（只有一个div在其中），所以它找不到匹配。

Answer 2

对于选择器，第二个参数应该是jQuery或DOM对象。如果您提供字符串，它将搜索字符串的内容。为了使它工作，你应该通过以下方式使html变量成为一个对象：

var html = $('<form action="/" method="get" name="myform"><div>123</div></form>');
console.log($('div', html));

然后，如果您愿意，可以通过以下方式将其添加到您的页面：

$('body').add(html);

对jQuery对象变量使用$也是一个好主意：

var $html = $('<form action="/" method="get" name="myform"><div>123</div></form>');

所以你可以很容易地知道这已经是一个jQuery对象了，你不需要打电话给ex。 $（html）.show（）每次你想用它做什么，你可以简单地调用$ html.show（）;

Answer 3

var html = '<form action="/" method="get" name="myform"><div>123</div></form>';
console.log($(html).html());

由于表单是html的根元素，$(html)将返回所需的JQuery对象。因此，如果您尝试选择表单标记，Jquery会尝试在表单中找到另一个表单标记，当然 - 它不存在。

Answer 4

$('form', html)的作用为$(html).find('form')。 .find()不会查看原始元素，只会查看其子元素，因此无法找到form。

您可以使用一些解决方法，例如：

var html = '<form action="/" method="get" name="myform"><div>123</div></form>';
console.log($('form', '<div>' + html + '</div>'));

Fiddle

表单选择器无法处理动态标记

4 个答案: