jQuery选择器上下文失效问题求助

我完全懂你现在的困惑——用$.parseHTML()解析HTML字符串后得到的是普通DOM节点数组，里面不光有你需要的div元素，还可能夹杂空白文本节点（就像你控制台里看到的text项），而jQuery的上下文选择器和.children()方法在这种场景下并不适用，这就是你始终找不到目标元素的核心原因。

为什么之前的写法不生效？ #

• $('div', Students_OE_Programs.layout)：当第二个参数是DOM节点数组时，jQuery会尝试把数组作为上下文去查找子元素，但这些div本身就是顶层节点，并非某个父容器的子元素，自然匹配不到。
• $(Students_OE_Programs.layout).children('div')：.children()是用来查找当前节点的直接子元素，但数组里的div都是同级的顶层节点，它们没有父节点在这个集合里，所以返回空结果。

正确的解决方法 #

你需要先把parseHTML返回的节点数组包装成jQuery对象，然后用.filter()方法筛选出其中的div元素（因为这些div是同级的顶层节点，不是父子关系）：

修改你的代码如下：

var Students_OE_Programs = { layout: null }
$(document).ready(function() {
  var l = '<div class="test">Programs</div>\
  <div id="OEPrograms_holder" class="pickboxHolder"></div>';
  Students_OE_Programs.layout = $.parseHTML(l);
  console.log(Students_OE_Programs.layout);
  // 用filter筛选数组中的div元素
  $(Students_OE_Programs.layout).filter('div').append('<span>test</span>');
  $('body').append(Students_OE_Programs.layout);
});

这样就能成功给两个div都添加上<span>test</span>元素了。

另外补充一点：$.parseHTML()默认会保留HTML字符串中的空白文本节点，所以你控制台里看到的数组长度是3（两个div+一个空白文本节点），用.filter('div')可以精准过滤掉非div节点，只处理你需要的元素。

内容的提问来源于stack exchange，提问作者Pioneer898