Использование JQuery для добавления списка заголовков

Question

у меня есть неупорядоченный список, как это:

<div class="blueBoxMid"> 
    <ul> 
    <li>First item <em>This is the hover text</em></li> 
    <li>Second item <em>This is the hover text</em></li> 
    </ul> 
</div> 

Я хочу использовать JQuery для создания этого:

<div class="blueBoxMid"> 
    <ul> 
    <li title="This is the hover text">First item</li> 
    <li title="This is the hover text">Second item</li> 
    </ul> 
</div> 

Мой текущий код выглядит Liket его, но я не мог не получится. Помогите кому-нибудь? :)

$('.blueBoxMid li').each(function(){ 
    $('.blueBoxMid li em').hide(); 
    $('.blueBoxMid li').attr('title', $(this).children('em').text()).hover(function(){$(this).css('cursor', 'help')}); 
}); 

Answer 1

Попробуйте что-то вроде этого:

$('div.blueBoxMid ul li').each(function() { 
    var tooltip = $(this).children('em').remove().text(); 
    $(this).attr('title', tooltip).css('cursor', 'help'); 
}); 

В основном, это петли через каждый <li> элемент, удаляет его <em> элемент и получает текстовое содержимое элемента <em>, то он применяет атрибут title и стиль CSS. Стиль CSS может быть всегда (не только при наведении), так как он будет только менять курсор при любом изменении.

Answer 2

jQuery иногда пытается получить атрибуты скрытых элементов, поэтому попробуйте установить заголовок элемента li, прежде чем скрывать элемент em.

Обратите внимание, что $('.blueBoxMid li em') и $('.blueBoxMid li') в вашей функции() все еще относятся ко всем элементам, соответствующим этим критериям; используйте $ (this) для обращения к каждому в свою очередь. Если вы хотите скрыть все элементы '.blueBoxMid li em', ваша строка $('.blueBoxMid li em').hide(); не должна находиться в каждом цикле.