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>

我目前的代码看起来像他的，但我无法让它工作。帮助任何人？：）

$('.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有时很难获得隐藏元素的属性，因此在隐藏em元素之前尝试设置li元素的标题。

请注意，每个（）函数中的$('.blueBoxMid li em')和$('.blueBoxMid li')仍然引用符合这些条件的所有元素;使用$（this）依次引用每一个。如果您要隐藏所有'.blueBoxMid li em'元素，则行$('.blueBoxMid li em').hide();不需要位于每个循环中。

使用jQuery添加列表标题

2 个答案: