Javascript 使用jQuery按数据属性选择克隆的元素

因此，我克隆了一个元素并向其中添加了一些

数据。现在，我需要通过其
数据属性
选择克隆的元素。问题是我找不到，请根据
数据属性
选择克隆的元素。有什么想法吗

这是小提琴

这不起作用：

var clone = $(".clone").clone(true);
clone.html("this is clone")
clone.data("info", "this-is-clone");
$(".clone-holder").append(clone);

// nothing is selected
var cloned = clone.find("[data-info='this-is-clone']");
cloned.css("color", "red")

@fjckls它只是一个解决方法，使用属性而不是数据，它
不解释代码不工作的原因。这种回答
这门课程对社区帮助不大国王

目前我已经接受了@Hendra Lim answer，我理解这是一种解决方法，它不使用
数据
属性，而是创建新的自定义属性。如果有人在我的场景中使用了
数据
的“正确”解决方案，那么我会重新考虑接受的答案。目前它还可以工作，所以我将离开它。
试试这个：

var clone = $(".clone").clone(true);
clone.html("this is clone")
clone.attr("info", "this-is-clone");
$(".clone-holder").append(clone);

var cloned = $(".clone-holder").find("[info='this-is-clone']");
cloned.css("color", "red")

下面是一个工作示例

错误的是，您试图在“.clone”元素中查找克隆元素，而必须在“.clone holder”元素中查找克隆元素，因为您将克隆元素附加在该元素中。并将clone.data替换为clone.attr。
小说明：使用
。data
将值存储在jQuery自己的命名数据存储中。使用
data-*
属性只是一个简单的HTML属性。因此，使用
clone.find（“[data info='this-is-clone']”）
，您实际上是在寻找
数据信息
html属性。@fjckls这只是一种使用属性而不是数据的解决方法，它不能解释代码为什么不工作。这种回答当然对社区没有多大帮助。@fjckls我不会添加我自己的答案，你可以在这里看到fiddle using data（），我还在注释中添加了一些解释。它确实解释了为什么原始答案不起作用。原因是因为搜索的范围。原始元素将搜索正在搜索的元素的子元素，因此它将永远找不到它。答案是搜索父容器，这样它就能够找到子元素。最初使用“clone.find”而不是“$”（“.clone holder”）“@bukko就是这个意思。只需将
clone.find
更改为
$（“.clone holder”）。find
@bukko不，这不起作用