Question

我在javascript变量中有这个html字符串，想要获取id值。

我将其转换为纯html，然后尝试获取div的id值。

var rowData = "<div class='multiid' id='3041' style='height:100%;' >test</div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.find('.multiid').attr("id");

结果应为var multiid = 3041，但不起作用。

Answer 1

您要查找的属性 id 在jQuery对象本身中。但是find(.multiid)在对象内部查找类为 multiid 的元素（作为嵌套元素），该元素确实不存在，并且attr()返回 undefined 。 / p>

尝试multiidhtml.attr("id");

var rowData = "<div class='multiid' id='3041' style='height:100%;' >test</div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.attr("id");
console.log(multiid);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

考虑以下示例，您可以在其中使用有意义的find()：

var rowData = "<div id='3041' style='height:100%;' >test <p class='multiid' id='myParagraph'>Nested P</p></div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.find('.multiid').attr("id");
console.log(multiid);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

.find()搜索元素的后代，它将与元素本身不匹配。您应该将HTML包装在另一个DIV中，这样它就不会成为顶层元素。

var multidhtml = $("<div>", {html: rowData});
var multiid = multidhtml.find(".multiid").attr("id");

仅当.multiid可能不是顶级元素时才需要。如果始终是顶部，请在另一个答案中使用更简单的解决方案。

Answer 3

.find（）搜索元素的后代，它与元素本身不匹配。因此，请使用.closest（），以便从选择器DOM的根目录进行搜索

var rowData = "<div class='multiid' id='3041' style='height:100%;' >test</div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.closest('.multiid').attr("id");

如果您确定所选DOM中存在 id 属性，则可以直接找到

multiid = multiidhtml.attr("id");

Answer 4

var rowData = "<div id='3041' style='height:100%;' >test <p class='multiid' id='myParagraph'>Nested P</p></div>";
var multidhtml = $("<div>", {html: rowData});
var multiid = multidhtml.find(".multiid").attr("id");

通过jQuery从JavaScript中的HTML字符串获取特定的ID值

4 个答案: