如何在jquery中console.log数据属性的值?

时间:2018-07-27 08:56:22

标签: jquery html

因此console.log部分只是为了使我更容易在将这段代码实现到整体解决方案中之前查看输出。我在堆栈溢出中看到您以这种方式选择数据属性:

decide

但是说,例如,我想选择我的html中所有如下所示的数据属性:

$("li[data-city*=New York]")

因此,一旦我选择了这些数据属性,我将如何console.log记录数据组属性的实际字符串值部分。

这似乎是一个基本问题,但即使是简单的简短回答也将大有帮助。问候:)

2 个答案:

答案 0 :(得分:4)

要选择所有具有data-group属性的元素,可以遍历选择器[data-group]选择的元素,并在迭代中使用{{3}获取属性的值}方法。

请参见以下示例:

$('[data-group]').each(function() {
  console.log($(this).data('group'));
})

答案 1 :(得分:0)

如果您不知道哪个“元素”具有数据组属性

    <!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  <div>
    <ul class="chosen-results" data-group="United States">
      <li class="active-result" data-city="98">New York</li>
      <li class="active-result" data-city="23">Los Angeles</li>
      <li class="active-result" data-city="35">Chicago</li>
      <li class="active-result" data-city="63">Houston</li>
    </ul>
    <ul class="chosen-results">
      <li class="active-result" data-city="45">Porto Alegre</li>
      <li class="active-result" data-city="67">Recife</li>
      <li class="active-result" data-city="39">Curitiba</li>
    </ul>
    <ul class="chosen-results" data-group="Canada">
      <li class="active-result" data-city="12">Toronto</li>
      <li class="active-result" data-city="26">Montreal</li>
      <li class="active-result" data-city="32">Vancouver</li>
      <li class="active-result" data-city="53">Ottawa</li>
    </ul>
  </div>
<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>

$('body').find('ul').each(function( index ) {

  if($( this ).attr('data-group')){

      console.log( index + ": " + $( this ).text() );

  }

});

</script>
  </body>
</html>