2014-10-05 66 views
-2

如何获取title属性并将其追加到其他地方?如何获取title属性并将其追加到其他地方

我有下面这段代码:

<div class="span"> 
<a title="SHARON MORGAN" href="/members/SHARONMORGAN"> 
    <span class="avatar avatar-96 avatar-default"></span> 
</a> 
</div> 

那我想改变这样的:

<div class="span"> 
<a title="SHARON MORGAN" href="/members/SHARONMORGAN"> 
    <span class="avatar avatar-96 avatar-default"></span> 
</a> 
<a href="/members/SHARONMORGAN">SHARON MORGAN</a> 
</div> 

公告名称SHARON MORGAN毗邻锚标记插入并与同一链路包它上面。任何帮助是极大的赞赏。

回答

0

使用jQuery,您将不得不以某种方式抓取元素并阅读ist title属性。然后你可以用它做你想做的。

<a title="SHARON MORGAN" id="sharon-morgan" href="..."><span>...</span></a> 
<script type="text/JavaScript"> 
var title = $('a#sharon-morgan').attr('title'); 
var href = $('a#sharon-morgan').attr('href'); 
var a = $('<a href="' + href + '">' + title + '</a>').appendTo('body'); 
</script> 

当然这只是一个例子,因为您没有指定太多的细节。看看jQuery,它完全适用于像这样的东西。

+0

'appendTo()'必须是''.span'',而不是'body'。 – Regent 2014-10-05 15:26:09

+0

此外,你为什么要添加'id'元素?有很多方法可以选择这个没有'id'的''元素。 – Regent 2014-10-05 15:27:33

+0

我说这只是一个例子,因为有数百种方法可以做到这一点。我看不到你将任何东西附加到span元素上,但更多的是创建一个新的a元素并在第一个元素之后附加到父元素。为什么ID?也作为一个例子。不知何故,你必须抓住元素。 – 2014-10-05 15:30:30

1

您可以使用after方法来生成新元素。 this在函数的回调是指所选择的元素(S),所以你可以使用this.titlethis.getAttribute('title')$(this).attr('title')为获得标题值:

$('div.span a').after(function() { 
    return $('<a/>', { 
     href: this.href, 
     text: this.title 
    }); 
}); 

或者用香草JS:

[].slice.call(document.querySelectorAll('div.span a')).forEach(function(el) { 
    var a = document.createElement('a'); 
    a.href = el.href; 
    a.textContent = el.title; 
    el.parentNode.insertBefore(a, el.nextSibling); 
}); 

http://jsfiddle.net/y2goyvvm/

1

用基本的jquery语句:

$(function() { 
    $('[title="SHARON MORGAN"]').each(function() { 
     $(this.parentNode).append('<a href=\"' + this.href + '\">' + this.title + '</a>'); 
    }); 
}); 
+0

'\“'可以简单地''''。 – Regent 2014-10-05 15:30:43

+0

丽晶酒店,你需要我们的帮助吗?至于知道你只告诉我们在我们的答案中我们做错了什么,但显然你不知道JavaScript或jQuery。它吸引花花公子。 – 2014-10-05 15:32:18

+0

但是,他是对的,这是我的坏习惯:D – Icepickle 2014-10-05 15:34:09

相关问题