This question already has answers here:
Using jQuery to replace one tag with another
                                
                                    (13个回答)
                                
                        
                        
                            Horizontal list items
                                
                                    (5个答案)
                                
                        
                                2年前关闭。
            
                    
我想更改一下:

<ul id="menu-footer-menue" class="menu">
    <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101">
        <a href="http://www.7tagetherapie.de/ueber-uns/" data-slimstat="5">Über uns</a>
    </li>
    <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100">
        <a href="http://www.7tagetherapie.de/impressum/" data-slimstat="5">Impressum</a>
    </li>
    <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99">
        <a href="http://www.7tagetherapie.de/datenschutz/" data-slimstat="5">Datenschutz</a>
    </li>
</ul>


对此:

<ul id="menu-footer-menue" class="menu">
    <span id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101">
        <a href="http://www.7tagetherapie.de/ueber-uns/" data-slimstat="5">Über uns</a>
    </span>
    <span id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100">
       <a href="http://www.7tagetherapie.de/impressum/" data-slimstat="5">Impressum</a>
    </span>
    <span id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99">
        <a href="http://www.7tagetherapie.de/datenschutz/" data-slimstat="5">Datenschutz</a>
    </span>
</ul>


在此页。

我已经试过了:

var html = [];
var list = jQuery('#menu-footer-menue');

html.push('<div>');
jQuery(list.find('li').each(function() {
    html.push('<span>' + jQuery(this).text() + '</span>');
}));
html.push('</div>');
jQuery(list.replaceWith(html.join('')));


但是可悲的是,它不起作用。我也必须使用jQuery$即时,因为出于任何原因我不允许在此站点上安装jQuery ...

我现在的问题是,如何在一行中获得3分?
我的想法是使用jQuery更改<li> tp <span>。但是如上所述,它不起作用...问题出在哪里,我该如何解决?还是有另一种/更好的方法来解决?

亲切的问候

最佳答案

我现在的问题是,如何在一行中获得3分?我的想法是使用jQuery将<li>更改为<span>。但是如上所述,它不起作用...问题出在哪里,我该如何解决?还是有另一种/更好的方法来解决?


简单的CSS,不需要jQuery,它是有效的HTML。 <span>不起作用的原因是因为它不属于无序列表<ul>。列表项<li>属于<ul>

我添加了演示2,这是您可以使用jQuery完成相同操作的一种方法,尽管这完全是过分的了。

演示1-CSS



#menu-footer-menue li {
  display: inline-block
}

<ul id="menu-footer-menue" class="menu">
  <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://www.7tagetherapie.de/ueber-uns/" data-slimstat="5">Über uns</a></li>
  <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://www.7tagetherapie.de/impressum/" data-slimstat="5">Impressum</a></li>
  <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://www.7tagetherapie.de/datenschutz/" data-slimstat="5">Datenschutz</a></li>
</ul>





演示2-jQuery



$(function() {
  $('#menu-footer-menue li').css('display', 'inline-block');
});

<ul id="menu-footer-menue" class="menu">
  <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://www.7tagetherapie.de/ueber-uns/" data-slimstat="5">Über uns</a></li>
  <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://www.7tagetherapie.de/impressum/" data-slimstat="5">Impressum</a></li>
  <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://www.7tagetherapie.de/datenschutz/" data-slimstat="5">Datenschutz</a></li>
</ul>

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

10-06 10:07
查看更多