jquery：用span替换元素a

Question

获取信息：它是一个移动（画布外）菜单，在页面源中不可见。它只能在移动视图中使用＆＃34;代码检查器＆＃34;等the page i'm talking about

我的代码：

 $('.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() 与回调一起使用，然后生成包含内容和更新的范围。此外，您的选择器无效，因此请将li:(:nth-child(2))更改为li:nth-child(2)以使其有效。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者您可以使用 unwrap() 和 wrap() 方法。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您不想维护元素内容，请使用 replaceWith() 添加新内容。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

更新：代码删除后会有一个额外的字符。检查您的控制台，您可以看到错误。

  

未捕获的SyntaxError：无效或意外的令牌

您可以在下面的图片中看到它作为红色标记。

Answer 2

这应该可以解决问题：

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

Answer 3

DEMO LINK

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)