Question

基本上我想在锚标签中附加<span></span>但在“home”之外。我想它应该很简单，但我刚开始使用jQuery。

所以这个：

<li class="home"><a href="index.php">home</a></li>

应该用Jquery这样结束：

<li class="home"><a href="index.php"><span>home</span></a></li>

我的HTML：

<ul id="navigation"> 
   <li class="home"><a href="index.php">home</a></li>
   <li class="portfolio"><a href="portfolio.php">portfolio</a></li>
   <li class="about"><a href="about.php">about</a></li>
   <li class="contact"><a href="contact.php">contact</a></li>
  </ul>

我的CSS：

ul#navigation {
 height: 20px;
 float: left;
 list-style: none;
 width: 100%;
}
ul#navigation li {
 float: left;
 margin: 0 4px 0 0;
}
ul#navigation li a {
 background: url(../images/tab.png);
 color: #C0C0C0;
 display: block;
 float: left;
 font-size: 14px;
 height: 20px;
 outline: none;
 padding-left: 10px;
 text-decoration: none;
}
ul#navigation li a:hover {
 background-position: 0 -20px;
 color: #666;
}
#home li.home a, #portfolio li.portfolio a{
 background-position: 0 -20px;
 color: #666;
}
ul#navigation span {
 background: url(../images/tab.png) 100% 0;
 display: block;
 line-height: 20px;
 padding-right: 20px;
}
ul#navigation li a:hover span {
 background-position: 100% -20px;
}
#home li.home span, #portfolio li.portfolio span {
 background-position: 100% -20px;
}

我的JS：

$(document).ready(function() {
    $('li.home a').wrapInner('<span></span>')
});

Answer 1

$("li.home a").wrapInner("<span></span>")

不知何故，StackOverflow清除了我的标记。调用中应该有<span></span>。

Answer 2

试试这个：

$('.home a').each(function(){
    var content = $(this).html();
    $(this).html('<span>'+content+'</span>');
});

如何在锚标记中附加元素并使用Jquery包含单词？

2 个答案: