Change
to ?

Question

I would like to change that:

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

To that:

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

On this page.

I already tried this:

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('')));

But sadly, it doens't work. Also I have to use jQuery instant of $ because I am not allowed to install jQuery on this site for whatevery reason...

My question now is, how can I get the 3 points in one line? My idea is to do that with jQuery changing <li> tp <span>. But as mentioned, it doesn't work... Where is there issue and how can I fix that or is there another/better way to do that?

Kind Regards

Just curious what the point is of this - `li` is better as it is semantically correct within `ul`. Is there some benefit to going through all this work to change them? — chazsolo, Sep 02 '17 at 02:13
What you're asking for is invalid HTML, and the browser will probably try to fix your mistake by modifying the HTML — adeneo, Sep 02 '17 at 02:15
Welcome to StackOverflow. You said that it "doesn't work." What does it do? Does it change `ul` to `span` but the layout isn't the way you want it? Or does it fail to change `ul` to `span`? Either way, chazsolo is right, to change the layout you shouldn't be changing the semantic `li` elements to something else. Instead you could use CSS to change how the `li` elements are rendered. — LarsH, Sep 02 '17 at 02:17

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

My question now is, how can I get the 3 points in one line? My idea is to do that with jQuery changing <li> to <span>. But as mentioned, it doesn't work... Where is there issue and how can I fix that or is there another/better way to do that?

Simple CSS no jQuery needed, and it's valid HTML. The reason why a <span> doesn't work is because it doesn't belong within an unordered list <ul>. List items <li> belong in an <ul>.

I've added demo 2 which is a way you can accomplish the same thing with jQuery, although it's totally overkill.

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

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

score 0 · Answer 2 · edited Sep 02 '17 at 04:30

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

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

Change to ?

2 Answers2

Demo 1 - CSS

Demo 2 - jQuery

Change
to ?