jQuery-从一个HTML字符串中，找到具有给定数据属性的所有元素

jQuery - from an HTML string, find all elements with a given data attribute

本文关键字：数据属性 元素 一个 字符串 HTML jQuery-      更新时间：2023-09-26

使用jQuery，我试图从服务器返回的HTML字符串中查找所有具有data-inject属性的元素。下面是一个HTML字符串示例：

var html = '<div class="container-fluid">
              <div class="row-fluid">
                <div data-inject="ViewModel1" class="span12"></div>
              </div>
            </div>
            <div data-inject="ViewModel2" class="navbar navbar-fixed-bottom"></div>';

我似乎找不到同时获得div的方法，问题似乎是我从一个HTML字符串开始。

这里有一个fiddle显示了使用$('[data-inject]')查询DOM就可以按预期返回这两个元素。但是，使用$('[data-inject]', html)查询HTML字符串只返回一个元素（ViewModel1元素）。

有人知道我做错了什么，以及如何得到预期的结果吗？

这是因为您没有根元素。只是在查询过程中临时使用wrapAll。

var html = '<div class="container-fluid"><div class="row-fluid"><div data-inject="TowerLogsViewModel" class="span12"></div></div></div><div data-inject="TowerLogFormViewModel" class="navbar navbar-fixed-bottom"></div>';
var $html = $(html);
$('[data-inject]', $html.wrapAll($('<div>')).parent()).each(function (ix, el) {
    console.log($(el).data('inject'));
});

演示

由于集合中没有根元素，因此将从集合中的第一个元素（即<div class="container-fluid">）中找到data-inject，因此您只能得到一个。如果你使用过滤器，你将只得到另一个。因此，暂时将其包裹起来。

相关文章：