使用数据值的jQuery选择器不适用于以编程方式分配的值

问题描述

我遇到一种情况，我需要以编程方式将某些数据值分配给元素。一切正常，我可以使用$("#elementId").data("dataname")重新获得价值。但是，如果我尝试使用$(".className[data-dataname='assignedValue']")获取具有特定类和数据值的多个项目，则它将不起作用。

即使我使用从undefined获得的$(".className[data-dataname='assignedValue']").prop("id")的值，我也尝试在Devtools上运行这些命令并获得assignedValue的{​​{1}}

我创建了一个虚拟片段来解释我的问题，希望有人能在这里为我提供帮助。
（以编程方式分配了data1，并在html中添加了data2）

$("#elementId").data("dataname")

$(document).ready(function () {

            $(".myDiv").data("data1","assignedValue1");

            $.each($(".myDiv"),function () {
                console.log($(this).prop("id") + " > fetching value using data1: " + $(this).data("data1"));
            });

            $.each($(".myDiv[data-data1='assignedValue1']"),function () {
                console.log("found something from data1"); //FOUND NOTHING!!
            });

            $.each($(".myDiv[data-data2='assignedValue2']"),function () {
                console.log("found from data2 > id: " + $(this).prop("id"));
            });

            console.log("With data1: " + $(".myDiv[data-data1='assignedValue1']").prop("id"));
            console.log("With data2: " + $(".myDiv[data-data2='assignedValue2']").prop("id"));

        });

解决方法

这是关于$.data在jQuery中如何工作的普遍误解。 $.data不会修改DOM属性

使用data（）方法更新数据不会影响DOM中的属性。要设置data- *属性值，请使用attr。

要解决此问题，请使用$.attr

$(document).ready(function () {

            $(".myDiv").attr("data-data1","assignedValue1");

            $.each($(".myDiv"),function () {
                console.log($(this).prop("id") + " > fetching value using data1: " + $(this).data("data1"));
            });

            $.each($(".myDiv[data-data1='assignedValue1']"),function () {
                console.log("found something from data1"); //FOUND NOTHING!!
            });

            $.each($(".myDiv[data-data2='assignedValue2']"),function () {
                console.log("found from data2 > id: " + $(this).prop("id"));
            });

            console.log("With data1: " + $(".myDiv[data-data1='assignedValue1']").prop("id"));
            console.log("With data2: " + $(".myDiv[data-data2='assignedValue2']").prop("id"));

        });

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

    <div id="div1" class="myDiv" data-data2='assignedValue2'>Div1</div>
    <div id="div2" class="myDiv" data-data2='assignedValue2'>Div2</div>
    <div id="div3" class="myDiv" data-data2='assignedValue2'>Div3</div>
    <div id="div4" class="myDiv" data-data2='assignedValue2'>Div4</div>
    <div id="div5" class="myDiv" data-data2='assignedValue2'>Div5</div>