Adding title to li element

Question

I have this HTML:

<ul style="max-height: 400px;" class="dropdown-list-items current-list">
    <li class="dropdown-list-item unselectable  disabled " data-list-item-value="144" data-level-name="undefined" role="presentation">
        <span class="list-item-description text-ellipsis">1 Week</span>
    </li>
</ul>

I want to add a title attribute to the specific li element. I have many li elements in entire HTML inside the ul element. I have this javascript/jquery:

$('.dropdown-list-item.unselectable.disabled option[data-list-item-value="144"]').attr('title', 'testing titles');

But that doesn't seem to be working. When I directly add a title to the HTML, it appears on mouse over. However, I don't want to write title directly to the HTML. Is my script malformed or incorrect? Or am I missing something else?

JSFiddle

Answer 1

Try this

$('li[data-list-item-value="144"].dropdown-list-item.unselectable.disabled').attr('title', 'testing titles');

Example

In your html there is not option tag

Answer 2

You have used bad selector,

$('.dropdown-list-item.unselectable.disabled[data-list-item-value="144"]').attr('title', 'testing titles');

https://jsfiddle.net/43mz84uk/3/

Your selector try to find option inside li , you had to have HTML like:

<li class="dropdown-list-item unselectable disabled">
    <option data-list-item-value="144"><!-- << to this option you tried to set title -->
</li>