.data() jQuery 返回我在 HTML 上看不到的数据，带有折叠引导组件

Question

我正在对崩溃javascript组件做一些测试，我观察到一些奇怪的事情试图显示#collapseOnediv元素的数据属性。

我使用了他们网站上的bootstrap示例来做这个测试:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

我在我的控制台启动了这段代码:

JSON.stringify($('div#collapseOne').data())

我得到了{}，这是正常的，因为我在这个元素上没有data属性，但是如果我点击第二个手风琴，然后再次启动

JSON.stringify($('div#collapseOne').data())

我得到"{"collapse":null}"，但在控制台中div看起来像:

<div id="collapseOne" class="accordion-body collapse" style="height: 0px;">...</div>

所以，既然没有data-collapse属性，我不明白.data()怎么能返回这个…?

我不明白的第二个行为是，如果我点击第一个手风琴，然后启动

JSON.stringify($('div#collapseOne').data())

我得到这个错误TypeError: Converting circular structure to JSON在chrome和firefox上能够打印

{"collapse":{"$element":{"0":{"jQuery191023166512553611396":4},"context":{"jQuery191023166512553611396":4},"length":1},"options":{"toggle":"collapse","parent":"#accordion2"},"$parent":{"length":1,"0":{},"context":{"jQuery191023166512553611396":1,"location":{}},"selector":"#accordion2"},"transitioning":0}}

我真的很想知道这些数据隐藏在哪里，因为我不能通过检查元素在HTML上看到它。

Answer 1

jQuery的.data()不是元素data属性的直接反映。这些值由jQuery解释并存储在内部内存中。如果您手动添加一些数据到一个元素，您不能通过.attr()检索它。

$(function () {
    var element = $('#uniqueId');
    element.data('foo', 'bar');
    console.warn(element.attr('data-foo'));
    // console will warn undefined instead of 'bar' as expected
    console.error(element.data('foo'));
    // console will error 'bar' as expected
    // edit in response to a comment
    element.attr('data-baz', 'test');
    console.log(element.data('baz'));
    // console *will* log 'test'
    // manually add a data attribute to the element
    console.warn(element.data('myNewDataAttr'));
    // console *will* warn your newly added data attr
});

这些值也被转换成jQuery认为它们是什么，在data-bool="true"的情况下，$.data('bool')的值将是boolean类型，而不是string。