javascript - 如何在 jQuery 中使用数据属性值作为 ID 选择器？

Question

我需要通过数据属性将 ID 用作选择器，但我无法让它工作。

基本上，我在最顶部有一组链接。每个链接都有一个唯一的 ID。我使用这些链接即时创建链接。即时创建的链接有一个数据属性集，其中包含我之前单击的链接的 ID。现在，我需要使用我最初单击的链接的 Id 将此链接定位到数据属性，并显示内部文本。

如何将(动态创建的元素的)数据属性设置为 ID 选择器？

这是以下 Javascript 代码。

$('.group-1 a').on('click', function(){

  var block = 
 '<div class="group-2">' +
     '<a href="#" class="child-item" data-item="'+ $(this).attr('id') +'" >Child Item 100</a>' +
  '</div>'; 


$(block).appendTo( $('.host'));


});

$('body').on('click', '.child-item', function(){

      var getId = $(this).attr('data-item');

      var getInner = $('[id="#' + getid + '"]').text();

      $('.result').text(getInner);

})

HTML代码:

 <div class="group-1">
   <a href="#" id="item-1">Parent Item 100</a>
   <a href="#" id="item-2">Parent Item 200</a>
   <a href="#" id="item-3">Parent Item 300</a>
 </div>

 <hr>

 <div class="host"></div>

 <div class="result"></div>

我已经在 JSFiddle 准备了一个实时 View

Answer 1

你要的选择器不是'[id="#myId"]'，而是'[id="myId"]'(没有#):

$('[id="' + getId + '"]')

或者，因为您不使用像 : 这样的特殊字符:

$('#' + getId)

Fixed JSFiddle here (请注意，您还有 getid，我将其更改为 getId)。

现在，注意在这两种情况下有两个不同的选择器:第二个是 ID selector。 , 第一个是 attribute equals selector (这恰好是在比较 id 属性)。

ID 之间的重要区别和 Attribute-Equals选择器:

1) 具有重复 ID 的元素

当存在具有重复 ID 的元素(这是无效的 HTML，但仍然可以存在)时:#foo 选择器仅 获取DOM 中的第一个 匹配元素(带有foo id)； [id='foo'] 选择器获取所有这些。

2) 转义

在ID选择器中，id是一个CSS标识符，所以它必须符合CSS转义规则。 在属性选择器中，属性值是一个字符串。

例如，假设您的 ID 中有一个 ":":

$("#foo:bar"); // INVALID! :bar is intepreted as a (invalid) pseudo-class

$("#foo\\:bar"); // Valid! The : is properly escaped
$("[id='foo:bar']"); // Valid! The : is inside a string