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

准备了实时视图

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

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

1 个答案:

ID和Attribute-Equals选择器之间的重要差异：

1）ID重复的元素

2）逃脱