jQuery从html标记中提取属性ID

Question

I'm using a piece of code that is supposed to extract the value from a tag in html. It works fine with a single word for example 'desk' but it doesn't work with an id composed by two or more words: <a href='#' id='hello world'> Hello world </a>

In this cases I'm only getting the word 'hello' and not 'hello world'. Here's my code:

 $('ul').on('click', 'li', function(){ 
            var id = $(this).attr('id');
            console.log(id);
     });

Is there any way to extract a multiple word id? Thanks.

Answer 1

The id attribute cannot contain spaces according to the spec , but even if it could, the data-* attribute is a better place to store generic data. id s are used for identifying elements.

html:

<li data-value="hello world"></li>

js:

$('ul').on('click', 'li', function(){ 
    var val = $(this).data('value');
    console.log(val);
});

Answer 2

ID only supports one value. In that case, use a class.

Answer 3

ID should be a unique value, and thus only have one value in it. Using spaces is bad, I would replace them with underscores. If you need multiple values, you'll probably want to use classes instead.

However, this works like you are asking for.

HTML:

<li id='hello_world'> Hello world </li>

JS:

$('li').on('click', function(){ 
        var id = $(this).attr('id');
        alert(id);
});