Блог

Главная - Вопросы по программированию - Селектор jQuery, использующий значение данных, не работает с программно назначенными значениями

Селектор jQuery, использующий значение данных, не работает с программно назначенными значениями

#javascript #html #jquery #tags

#javascript #HTML #jquery #Теги

Вопрос:

У меня ситуация, когда мне нужно программно присвоить элементам определенные значения данных. Все работает хорошо, и я могу вернуть значение с помощью $("#elementId").data("dataname") . Однако, если я попытаюсь извлечь несколько элементов с определенным классом и значением данных, используя $(".className[data-dataname='assignedValue']") , это не сработает.

Я пробовал запускать эти команды в Devtools и получил undefined for $(".className[data-dataname='assignedValue']").prop("id") , даже когда я использую значение assignedValue , полученное из $("#elementId").data("dataname")

Я создал фиктивный фрагмент, объясняющий мою проблему, и надеялся, что кто-нибудь поможет мне здесь.
(data1 присваивается программно, а data2 добавляется в html)

 $(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"));

        });  
 <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>

Ответ №1:

Это распространенное заблуждение о том, как $.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>