Как получить атрибут title элемента и вставить его после элемента, используя jquery?

Question

У меня есть список с элементами списка, как это...

<li class="first leaf">
  <a href="/admin/store/orders/view" title="View and process the orders.">View orders</a>
</li>

И я хочу взять атрибут title и добавить его как div после <a> как это...

<li class="first leaf">
  <a href="/admin/store/orders/view" title="View and process the orders.">View orders</a>
  <div>View and process the orders.</div>
</li>

Пока я здесь...

(function ($) {    
  $('#block-menu-menu-admin-welcome li a').each(function () {
    $(this).append('<div>' + $(this).attr('title') + '</div>');
  });
})(jQuery);

Но это не работает. Кто-нибудь может помочь?

Answer 1

JQuery .append() вставить HTML в выбранный элемент, но вам нужно вставить HTML после выбранного элемента. использование .after() вместо.

$('#block-menu-menu-admin-welcome li a').each(function () {
    $(this).after('<div>' + $(this).attr('title') + '</div>');
});

$('a').each(function(){
    $(this).after('<div>' + this.title + '</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="first leaf">
    <a href="/admin/store/orders/view" title="View and process the orders.">View orders</a>
  </li>
</ul>

Answer 2

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

$(this).parent().append('<div>' + $(this).attr('title') + '</div>');

Answer 3

Вот РАБОЧАЯ СКИДКА для вас.

$(function(){

     $('.first').append($('.first a').attr('title'));

});