Question

我想改变一下：

<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 $的{{1}}因为我无法在此网站上安装jQuery ...

我现在的问题是，如何在一条线上获得3分？我的想法是通过改变<li> tp <span>的jQuery来做到这一点。但如上所述，它不起作用......哪里有问题，我该如何解决这个问题，还是有另一种/更好的方法呢？

亲切的问候

Answer 1

我现在的问题是，如何在一行中获得3分？我的想法是通过jQuery将<li>更改为<span>来实现这一目标。但如上所述，它不起作用......哪里有问题，我该如何解决？还是有其他/更好的方法来做到这一点？

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

我已经添加了demo 2，这是一种可以用jQuery完成相同操作的方法，虽然它完全有点过分。

演示1 - CSS

＆＃13;

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

＆＃13;

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

＆＃13;

演示2 - jQuery

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

ul li {
  float: left;
  list-style-type: none;
  margin-right: 2px;
}

＆＃13;

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

＆＃13;

将<li>更改为<span>？

2 个答案:

演示1 - CSS

演示2 - jQuery