Question

我有这样的事情：

<ul class="links">

    <li>
        <a title="Link 1 description" href="example.html">Link 1</a>
    </li>

    <li>
        <a title="Link 2 description" href="example2.html">Link 2</a>
    </li>

    <li>
        <a title="Link 3 description" href="example3.html">Link 3</a>
    </li>

    <li>
        <a title="Link 4 description" href="example4.html">Link 4</a>
    </li>

</ul>

想得到这样的东西：

<ul class="links">

    <li>
        <span class="description">Link 1 description</span>
        <a title="Link 1 description" href="example.html">Link 1</a>
    </li>

    <li>
        <span class="description">Link 2 description</span>
        <a title="Link 2 description" href="example2.html">Link 2</a>
    </li>

    <li>
        <span class="description">Link 3 description</span>
        <a title="Link 3 description" href="example3.html">Link 3</a>
    </li>

    <li>
        <span class="description">Link 4 description</span>
        <a title="Link 4 description" href="example4.html">Link 4</a>
    </li>

</ul>

我需要从每个链接的标题中提取值，然后在span标记之间添加此值，并在li标记之前添加addClass描述。

知道怎么做吗？

提前致谢。

Answer 1

$('a').each(function() {
    $('<span class="description">' + $(this).attr('title') + '</span>')
        .insertBefore(this);
});

Answer 2

prepend方法有一个重载，使用回调来返回每个前置的内容，这似乎是理想的，但该函数只是用索引和当前的html，所以你必须创建新的来自html的元素来获取标题（或使用索引来构建可以找到元素的选择器），创建一个元素并将其转换为html代码以返回它，这有点拉伸：

$('ul.links li').prepend(function(index, html){
  return $('<div/>').append($("<span/>").addClass('description').text($(html).attr('title'))).html();
});

只需使用each方法就可以获得对容器的引用，这样您就可以从现有元素中获取标题并添加每个范围：

$('ul.links li').each(function(){
  $(this).prepend($('<span/>').addClass('description').text($('a', this).attr('title')));
});

您还可以先添加所有span元素，然后复制标题：

$('ul.links li').prepend('<span></span>').each(function(){
  $('span', this).addClass('description').text($('a', this).attr('title'));
});

编辑：

随着文档的新增功能（由patrick dw发起），第一个示例变得更简单，更高效：

$('ul.links li').prepend(function(index, html){
  return $("<span/>").addClass('description').text($(this).attr('title'));
});

Answer 3

$('.links > li > a[title]').before( function() {
    return $('<span>', {text:this.getAttribute('title'), 'class':'description'});
});

示例： http://jsfiddle.net/LFzNg/

这会将函数传递给before()^[docs]方法，该方法返回要放在每个<a>元素之前的新元素。

以类似的方式，您可以借用.attr()作为迭代器，以获得title属性的简单方法。

$('.links > li > a[title]').attr( 'title', function(i,attr) {
    $('<span>', {text:attr,'class':'description'})
        .insertBefore( this );
});

示例： http://jsfiddle.net/LFzNg/1/

由于您隐式返回undefined，因此title属性未更新。

Answer 4

首先，您将获得列表中的所有链接：

var links = jQuery('.links a');

然后，您将在循环中创建新元素。这意味着每个链接都会创建一个span，然后插入到列表元素中：

// Iterate over all links
links.each(function(){
    // this reference points to current element
    var currentLink = jQuery(this);
    // Create a new span element
    var span = jQuery('<span>');
    // Set attributes and content of the span
    span.addClass('description').text(currentLink.attr('title'));
    // Insert the span just in front of the link
    currentLink.before(span);
});

请注意，所提供的代码比必要的冗长得多 - 但这应该有助于理解它。

Answer 5

试试这个：

$('ul.links li').each(function () {
    var $li = $(this),
        title = $li.children('a').attr('title'),
        $span = $('<span/>').addClass('description').text(title);
    $li.prepend($span);
});

Answer 6

试试这个：

$('ul.links li a').each(function() {
   $(this).prepend('<span class="description">' + $(this).attr('title') + '</sapn><br/>')
})

Answer 7

使用.prepend()，而不是.wrapInner()。

$('ul.links > li > a').prepend(function ()
{
    return $('<span/>',
    {
        'class': 'description',
        text: this.title
    }).add($('<br/>'));
});

演示：http://jsfiddle.net/mattball/GNpQz/

Answer 8

试试这个

$("ul > li > a").each(function(){
   $(this).prepend("<span class='description'>"+$(this).attr("title")+"</span><br />");
});

Answer 9

$('a').each(function(i){
    $(this).html('<span class="description">' + $(this).attr('title') + '</span><br/>Link ' + i);
});

如何使用jquery从链接标记的标题中提取值？

9 个答案:

编辑：

演示：http://jsfiddle.net/mattball/GNpQz/