javascript - 表单选择器不适用于动态标记

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

Selector Context By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function. For example, to do a search within an event handler, the search can be restricted like so:

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

When the search for the span selector is restricted to the context of this, only spans within the clicked element will get the additional class.

Internally, selector context is implemented with the .find() method, so $( "span", this ) is equivalent to $( this ).find( "span" ).

由于您的第二个示例在 字符串的内容中没有任何形式(其中只有一个 div)，因此找不到匹配项。