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

Question

I need to use an ID as a selector by using a data attribute but I can't get it work.

Basically, I have a group of links at the very top. Each link have a unique id. I use these links to create a link on the fly. The link created on the fly has a data attribute set with the id of the one I previously clicked on. Now, I need to target this link with the data attribute using the Id of the link I clicked at first and show the inner text.

How can I set a data attribute (of an element created on the fly) as an ID selector?

Here is the following Javascript code.

$('.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);

})

The HTML code:

 <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>

I've prepared a live view at JSFiddle

Answer 1

The selector you want is not '[id="#myId"]' , but '[id="myId"]' (there is no # ):

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

or, since you don't use special chars like : :

$('#' + getId)

Fixed JSFiddle here (notice you also had getid which I changed to getId ).

Now, it pays to notice in these two cases there are two different selectors: the second is an ID selector , and the first is an attribute equals selector (that happens to be comparing the id attribute).

Important Differences Between the ID and Attribute-Equals selectors:

1) Elements with duplicated IDs

When there are elements with duplicated IDs (which is invalid HTML, but still can exist): the #foo selector only fetches the first matched element in the DOM (with the foo id); and the [id='foo'] selector fetches all of them.

2) Escaping

In the ID selector, the id is a CSS identifier, so it must match the CSS escaping rules. In the attribute selector, the attribute value is a string.

For example, say your ID has a ":" in it:

$("#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