Как добавить текст тега в span?

Question

[Timofey4]

У меня есть меню сделанное на WordPress, оно имеет такую структуру:

<ul id="menu_main" class="catalogbtn">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-79"><span></span><a href="http://u1431922.isp.regruhosting.ru/catalog/">Каталог игрушек</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-175"><span></span><a href="http://u1431922.isp.regruhosting.ru/product-category/dolls/">Куклы</a>
	<ul class="sub-menu">
		<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-112"><span></span><a href="http://u1431922.isp.regruhosting.ru/product-category/robots/">Роботы</a></li>
	</ul>
</li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-85"><span></span><a href="http://u1431922.isp.regruhosting.ru/product-category/constructors/">Конструкторы</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><span></span><a href="http://u1431922.isp.regruhosting.ru/about/">О нас</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><span></span><a href="http://u1431922.isp.regruhosting.ru/news/">Новости</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><span></span><a href="http://u1431922.isp.regruhosting.ru/contacts/">Контакты</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><span></span><a href="http://u1431922.isp.regruhosting.ru/delivery/">Оплата и доставка</a></li>
</ul>

Мне нужно, чтобы получилось нечто такое:

<ul id="menu_main" class="catalogbtn">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-79"><span>Каталог игрушек</span>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-175"><span>Куклы</span>
	<ul class="sub-menu">
		<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-112"><span></span><a href="http://u1431922.isp.regruhosting.ru/product-category/robots/">Роботы</a></li>
	</ul>
</li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-85"><span></span><a href="http://u1431922.isp.regruhosting.ru/product-category/constructors/">Конструкторы</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><span></span><a href="http://u1431922.isp.regruhosting.ru/about/">О нас</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><span></span><a href="http://u1431922.isp.regruhosting.ru/news/">Новости</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><span></span><a href="http://u1431922.isp.regruhosting.ru/contacts/">Контакты</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><span></span><a href="http://u1431922.isp.regruhosting.ru/delivery/">Оплата и доставка</a></li>
</ul>

То есть, если <li> имеет дочерний элемент, то текст ссылки нужно вставить в <span> и ссылку удалить.

Сам сделал вот такой код на js

$(function (){
        $('.menu-btn').click(function(){
            let textA = $('.menu-item-has-children > a').text();
            $('.menu-item-has-children > span').text(textA);
            $('.menu-item-has-children > a').remove();
        });
    });

Но он берет в переменную текст всех элементов, а мне нужно по отдельности.

Answer 1

[Павел]

Цикл?
Each

Comments

[Timofey4]

А можешь примерный код написать, просто наверное я где-то ошибся. Вот какой код у меня получился

$('.menu-btn').click(function(){
            $('.menu-item-has-children > a').each(function(){
                let textA = $(this).text();
                console.log(textA);
                $('.menu-item-has-children > span').text(textA);
                $('.menu-item-has-children > a').remove();
            });
        });

И получается что он в спаны засовывает одно и тоже слово, а не разные, а если выводить переменную textA в консоль, то видно почему-то 4 строки:
Каталог игрушек
Куклы
Каталог игрушек
Куклы
P.S. Буду очень благодарен, так как новичок и js очень плохо разбираюсь

[Павел]

что-то типа того

$('.menu-btn').click(function(){
            $('.menu-item-has-children a').each(function(){
                let textA = $(this).text();
                console.log(textA);
                $(this).siblings('span').text(textA);
                $(this).remove();
            });
        });

[Timofey4]

Павел, огромное спасибо! Я чуть подредактировал и у меня получилось! Вот в итоге какой код вышел:

$('.menu-btn').click(function(){
            $('.menu-item-has-children > a').each(function(){
                let textA = $(this).text();
                console.log(textA);
                $(this).siblings('span').text(textA);
                $(this).remove();
            });
        });

P.S. Ещё раз безмерно благодарен! Без Вас не справился бы!