具有相似标签/类的对象内的嵌套元素答案

【问题标题】：Nested elements inside object with similar tag/class具有相似标签/类的对象内的嵌套元素
【发布时间】：2017-04-17 12:23:43
【问题描述】：

我有一个带有一些文本的 div。我需要在这个 div 中获取一个包含相似标签的所有元素的数组。我将选定的字符串数据存储在变量中并将其转换为对象。我需要在这个字符串中获取所有带有“sen”标签的元素。我尝试使用“查找”和“过滤器”，但它们都给了我不完整的结果。我这里需要的数组是所有的“sen”标签，即从“.h351”类到“.h356”类。

这是一个小提琴test link 以获得清晰的想法。检查控制台以查看结果。

JS代码

var htmlSet = '<span xmlns="http://www.w3.org/1999/xhtml" class="reset black2"><sen name="351" class="h h351">Sagen</sen></span><sen xmlns="http://www.w3.org/1999/xhtml" name="352" class="h h352"> Sie bitte nicht, der Schüler verfüge nicht über die nötigen kognitiven Funktionen, um sich das derart verteilte Wissen überhaupt anzueignen.</sen><sen xmlns="http://www.w3.org/1999/xhtml" name="353" class="h h353"> Denn ebendiese Funktionen sind es, die sich mit dem Träger und durch den Träger ändern.</sen><sen xmlns="http://www.w3.org/1999/xhtml" name="354" class="h h354"> Durch die Schrift und den Buchdruck etwa hatte das Gedächtnis sich so sehr gewandelt, daß Montaigne sagen konnte, er ziehe einen wohlbeschaffenen einem wohlgefüllten Kopf vor.</sen><sen xmlns="http://www.w3.org/1999/xhtml" name="355" class="h h355"> Dieser Kopf ist unterdessen noch einmal mutiert.</sen><sen xmlns="http://www.w3.org/1999/xhtml" name="356" class="h h356"></sen>';
var htmlSetArr = $(htmlSet).find('sen');
console.log("array using find");
console.log(htmlSetArr);
var htmlSetArr1 = $(htmlSet).filter('sen');
console.log("array using filter");
console.log(htmlSetArr1);

【问题讨论】：

标签： jquery html filter find

【解决方案1】：

这行得通：

$('.h').each(function(e){
    console.log($(this));
});

或使用 sen 标签：

// Using the sen tag...
$('sen').each(function(e){
    console.log($(this));
});

https://jsfiddle.net/kxt4x55m/5/

【讨论】：

数据存储在变量中，不在页面上。在那种情况下，我无论如何都需要使用“查找”，但它不能正常工作。

【解决方案2】：

我可以通过这种方式对其进行排序。将内容包装在另一个 div 中，“查找”工作正常。

这是更新小提琴link。

JS 代码

var htmlSet = '<span xmlns="http://www.w3.org/1999/xhtml" class="reset black2"><sen name="351" class="h h351">Sagen</sen></span><sen xmlns="http://www.w3.org/1999/xhtml" name="352" class="h h352"> Sie bitte nicht, der Schüler verfüge nicht über die nötigen kognitiven Funktionen, um sich das derart verteilte Wissen überhaupt anzueignen.</sen><sen xmlns="http://www.w3.org/1999/xhtml" name="353" class="h h353"> Denn ebendiese Funktionen sind es, die sich mit dem Träger und durch den Träger ändern.</sen><sen xmlns="http://www.w3.org/1999/xhtml" name="354" class="h h354"> Durch die Schrift und den Buchdruck etwa hatte das Gedächtnis sich so sehr gewandelt, daß Montaigne sagen konnte, er ziehe einen wohlbeschaffenen einem wohlgefüllten Kopf vor.</sen><sen xmlns="http://www.w3.org/1999/xhtml" name="355" class="h h355"> Dieser Kopf ist unterdessen noch einmal mutiert.</sen><sen xmlns="http://www.w3.org/1999/xhtml" name="356" class="h h356"></sen>';
htmlSet = '<div>'+htmlSet+'</div>';
var htmlSetArr = $(htmlSet).find('sen');
console.log("array using find");
console.log(htmlSetArr);
console.log($(htmlSet).find('.h'))
var htmlSetArr1 = $(htmlSet).filter('sen');
console.log("array using filter");
console.log(htmlSetArr1);

【讨论】：