Блог

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

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

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я изучаю автоматическое тестирование пользовательского интерфейса и пытаюсь найти этот элемент

 <a tabindex="-1" href="javascript:void(0)" data-value="{"stringVal":"date-desc-rank"}" id="s-result-sort-select_4" class="a-dropdown-link">Release Date</a>

на веб-странице с использованием атрибута «data-value».

Но когда я запускаю следующее:

 $('a[data-value="{"stringVal":"date-desc-rank"}"]')

возвращает ошибку:

Неперехваченное исключение DOMException: Документ.querySelector: ‘a[data-value=»{«stringVal»:»date-desc-rank»}»]’ не является допустимым селектором

Я также пытался избежать двойных кавычек с символами обратной косой черты безрезультатно.

Любая помощь была бы очень признательна.

Комментарии:

1. Самое простое решение, если у вас есть поддержка браузера, — использовать литерал шаблона для строки, а затем вы можете использовать как одинарные, так и двойные кавычки в селекторе.

2. Или используйте id или class вместо этого.

3. Привязка будет такой же, как <a tabindex="-1" href="javascript:void(0)" data-value="{" stringval":"date-desc-rank"}"="" id="s-result-sort-select_4" class="a-dropdown-link">Release Date</a> в реальном DOM.

4. $(‘a[data-value='{«stringVal»:»date-desc-rank»}»‘]’)

Ответ №1:

Вам нужно использовать одинарные кавычки в html, чтобы обернуть json и использовать экранированные кавычки в селекторе jQuery.

Другой подход заключается в использовании $('a[data-value]').filter(function) и проверке данных в обратном вызове. Когда атрибут данных содержит допустимый json, jQuery data() автоматически преобразует его в object / array для вас.

 // this version changes the text
$('a[data-value='{"stringVal":"date-desc-rank"}']').text('Inserted text');

// this version changes the color
$('a[data-value]').filter(function(){  
   return $(this).data('value').stringVal === "date-desc-rank"
}).css('color', 'red');  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a tabindex="-1" href="javascript:void(0)" data-value='{"stringVal":"date-desc-rank"}' id="s-result-sort-select_4" class="a-dropdown-link">Release Date</a>

Комментарии:

1. Спасибо за ваш ответ. Однако я не могу изменять атрибуты элемента и могу работать только с данным селектором как есть. Итак, к сожалению, я не могу «использовать одинарные кавычки в html для переноса json» @charlietfl

2. Ну, если кавычки такие, как показано в вопросе в html, это нарушит атрибуты для этого элемента, когда анализатор dom попытается их оценить. Проверьте в инспекторе элементов инструментов разработчика браузера и посмотрите, не повреждены ли они там

Ответ №2:

Я использую encodeURIComponent для кодирования материала, когда я хочу сохранить его в data-

И у меня есть несколько прототипов для объекта String, чтобы упростить процесс.

 String.prototype.encode = function() { return encodeURIComponent(this).replace(/'/g,''');};
String.prototype.decode = function() { return decodeURIComponent(this); };

`{"stringVal":"date-desc-rank"}`.encode(); //{"stringVal":"date-desc-rank"}

<a data-value="{"stringVal":"date-desc-rank"}">Release Date</a>

Примечание для другого ответа здесь вы также можете использовать атрибут прямо в селекторе, фильтровать не нужно.

 $(`a[data-value="{"stringVal":"date-desc-rank"}"]`).css('color', 'red');

Хотя вы можете рассмотреть возможность использования более простого атрибута для селекторов, а не всего строкового объекта.

Комментарии:

1. > Хотя вы можете рассмотреть возможность использования более простого атрибута для селекторов, а не всего строкового объекта. Другие атрибуты, такие как идентификатор или класс, с большей вероятностью изменятся, что делает мой тест менее надежным. Я использую атрибуты data- *, как рекомендовано в Cypress.io документация. @PoorlyWrittenCode

2. Понятия не имею, что это такое. Но я предлагаю, вместо того data-value="stringified object" , чтобы вы могли бы сделать что-то вроде data-string-val="date-desc-rank" . Таким образом, вам не нужно беспокоиться о хранении символов, которые нарушат DOM.

Ответ №3:

Наконец-то найден правильный селектор:

 $("a[data-value='{"stringVal":"date-desc-rank"}']")