jquery:用span替换元素a

Question

获取信息:这是一个移动(画布外)菜单，它在页面源中不可见。它仅在移动视图中使用“代码检查器”等我说的那一页可见。

我的代码：

 $('.mm-listview li:(:nth-child(2)) .mm-next+a').replace('span');​

我的html：

 <ul class="mm-listview">
 <li><a class="mm-next" href="#mm-2" data-target="#mm-2"></a>
 <a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
 </li>
 <li><a class="mm-next" href="#mm-3" data-target="#mm-3"></a>
 <a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
 </li>

​

目前它还没有被取代。我知道，这应该很简单.

Answer 1

将replaceWith()与回调一起使用，然后使用内容和更新生成span。此外，您的选择器无效，因此将li:(:nth-child(2))更改为li:nth-child(2)以使其有效。

 $('.mm-listview li:nth-child(2) .mm-next+a').replaceWith(function() {
   return '<span>' + $(this).text() + '</span>'
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my html:

<ul class="mm-listview">
  <li>
    <a class="mm-next" href="#mm-2" data-target="#mm-2"></a>
    <a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
  </li>
  <li>
    <a class="mm-next" href="#mm-3" data-target="#mm-3"></a>
    <a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
  </li>
</ul>

​

或者您可以使用拆开()和包()方法。

​

$('.mm-listview li:nth-child(2) .mm-next+a').contents().unwrap().wrap('<span/>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my html:

<ul class="mm-listview">
  <li>
    <a class="mm-next" href="#mm-2" data-target="#mm-2"></a>
    <a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
  </li>
  <li>
    <a class="mm-next" href="#mm-3" data-target="#mm-3"></a>
    <a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
  </li>
</ul>

​

如果不想维护元素内容，那么在新内容中使用replaceWith()。

​

$('.mm-listview li:nth-child(2) .mm-next+a').replaceWith('<span/>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my html:

<ul class="mm-listview">
  <li>
    <a class="mm-next" href="#mm-2" data-target="#mm-2"></a>
    <a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
  </li>
  <li>
    <a class="mm-next" href="#mm-3" data-target="#mm-3"></a>
    <a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
  </li>
</ul>

​

UPDATE：在代码删除it.Check之后还有一个额外的字符，您可以看到错误。

未登录的SyntaxError:无效的或意外的令牌

在下面的图片中，你可以看到它是一个红色的标记。

​

​

Answer 2

这应该能起作用：

 $('.mm-listview li:nth-child(2) .mm-next+a').replaceWith('<span></span>');​

Answer 3

演示链接

html代码

<ul class="mm-listview">
 <li><a class="mm-next" href="#mm-2" data-target="#mm-2">1</a>
 <a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
 </li>
 <li>
 <a class="mm-next" href="#mm-3" data-target="#mm-3">2</a>
 <a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
 </li>

js代码

 $('.mm-listview li:nth-child(2) mm-next+a').replaceWith($('<span />').text('123'));

• 使用replaceWith替换
• 使用有效的选择器li:nth-child(2)