This question already has answers here:
Using jQuery to replace one tag with another
(13个回答)
Horizontal list items
(5个答案)
2年前关闭。
我想更改一下:
对此:
在此页。
我已经试过了:
但是可悲的是,它不起作用。我也必须使用
我现在的问题是,如何在一行中获得3分?
我的想法是使用jQuery更改
亲切的问候
演示2-jQuery
(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>