Найти data-value на странице

267

08 июня 2017, 09:05

<div id="abs">
<div class="panel-tag">
<i data-value="675"></i>
</div>
</div>
<button onclick="click()"></button>
<script>
function click(){
// узнать есть ли  data-value="675"
}
</script>

Answer 1

Если речь идет именно об атрибутах DOM-элементов:

var numb='i675'; 
//if ($("[data-value='675']").length > 0) { 
if (document.getElementById("abs").querySelector("[data-value='" + numb + "']") != null) { 
  console.log("I has it!"); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="abs"> 
  <div class="panel-tag"> 
    <i data-value="i675"></i> 
  </div> 
</div>

Answer 2

HTML
Синтаксис прост - любой атрибут, чье имя начинается с data-, является data-* атрибутом. Предположим у вас имеется статья и вы хотите сохранить дополнительную информацию без визуального представления. Используйте для этого data-атрибуты:

JavaScript
Читать data attributes в JavaScript также легко. Вы можете использовать getAttribute() для чтения. Но стандарты предоставляют более простой способ: DOMStringMap вы можете читать свойства через dataset:

var article = document.querySelector('#electriccars'), 
              data = article.dataset; 
  
console.log(data.columns); // -> "3" 
console.log(data.indexNumber); // -> "12314" 
console.log(data.parent); // -> "cars"

<article 
  id="electriccars" 
  data-columns="3" 
  data-index-number="12314" 
  data-parent="cars"> 
</article>

Answer 3

<div id="abs">
<div class="panel-tag">
<i data-value="675"></i>
</div>
</div>
<button onclick="click('675')"></button>
<script>
function click(numb){
// 1 Пример
var element = document.querySelector('[data-value="' + numb + '"]');
if (element) {
   console.log('есть  data-value="' + numb + '"');
}
// 2 Пример 
var elements = document.querySelectorAll('[data-value]');
for(var i = 0; i < elements.length; i++) {
   if (elements[i].dataset.value === numb.toString())
      console.log('есть data-value="' + numb + '"');
      break;
   }
}
</script>