javascript - 如何防止 jquery 全局选择器选择 Polymer 元素之外的内容

Question

我正在尝试在我的 Polymer 元素中使用基于 jquery 的库 <my-element> 。但一旦有多个这样的<my-element>在一页中，库仅选择第一个，因为它选择 id在 <my-element> 的一个实例中是唯一的但在多个重复。如何给 jquery 选择器一个域，以便它只能在域内进行选择？

Answer 1

它不起作用，因为 jQuery's id selector经过优化以仅获取第一个:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

<小时/>

您可以通过jQuery selector's context作为它的第二个参数(有趣的是，如果你传递多个上下文，它会选择多个 id):

// Initialize selected domains
$('#init-id', '.first-domain, .second-domain').initializeLibrary();

// Initialize all id in DOM
$('#init-id', '*').initializeLibrary();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="first-domain">
  <img id="init-id" />
</div>
<div class="second-domain">
  <img id="init-id" />
</div>
<div class="do-not-initialize-domain">
  <img id="init-id" />
</div>

<小时/>

或者，您的组件可以使用 Polymer.dom(this.root) 来初始化自身:

<dom-module id="my-component">

  <template>
    My component - yay!
  </template>

  <script>

    Polymer({

      is: 'my-component',

      ready: function() {
        $(Polymer.dom(this.root)).initializeLibrary();
      }

    });

  </script>

</dom-module>