найти элемент по атрибуту данных

Question

Я заполняю данные div во время выполнения, и мне нужно проверить, существует ли элемент.

Я вижу в SO некоторые советы о том, как это сделать.

У меня в DOM, что-то вроде

<div id="messages">
 <div class="direct-chat-msg right" data-msg-id="true_5521971319071@c.us_AB57E3CC69662AC4059250385929DD72">
        <div class="direct-chat-info clearfix">
          <span class="direct-chat-name pull-right"></span>
        </div>
 </div>
</div>

Теперь мне нужно проверить, существует ли элемент. Я попробовал следующее, но оба не работают:

document.querySelectorAll('[data-msg-id="true_5521999957988@c.us_26B99C7B58A653A4FFCFBD1DFF92498D"]').length>0

и

$("body").find(`[data-msg-id='${"true_5521999957988@c.us_26B99C7B58A653A4FFCFBD1DFF92498D"}']`).length>0

Answer 1

Я вижу, у вас есть префикс true: как насчет использования регулярного выражения (вместо целого идентификатора)?

JS:

document.querySelectorAll('div[data-msg-id="^true"]') ? foo : bar;

jQuery:

$('body').find('div[data-msg-id="^true"') ? foo : bar;

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

Answer 2

Вы также можете сделать что-то вроде этого:

const dataValue = document.getElementsByClassName("direct-chat-msg right");

if (dataValue[0].hasAttribute("data-msg-id")) {
    console.log(true);
} else {
    console.log(false)
}