Измените значок выпадающего раскрывающегося меню на родительский

Question

Здесь я пытался изменить значок раскрывающегося списка, на который нажали, на родительский.Я использовал функцию переключения Jquery, но не могу сделать это правильно.Помоги мне с этим.Вот что я пробовал до сих пор:

$('.dropdown-item').click(function(){
  $(this).parent().parent().parent().find('.dropdown-toggle').html(($(this).text()));
});

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">


<li class="nav-item mx-auto dropdown" data-toggle="dropdown" (click)="toggleClick('cubes', cubes)">
  <a class="nav-link dropdown" data-toggle="dropdown" href="#" [ngClass]="{active: cubes}">
    <i class="fa fa-cubes defaultColor dropdown-toggle" data-toggle="dropdown">
    </i>
    <div class="dropdown-menu ">
      <div class="row">
        <div class="col">
          <i class="fa fa-arrow-up defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-down defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-right defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-left defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
        <div class="col">
          <i class="fa fa-long-arrow-right defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
        <div class="col">
          <i class="fa fa-long-arrow-left defaultColor dropdown-item" style="font-size: 30px">
          </i>
        </div>
      </div>
    </div>
  </a>
</li>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Answer 1

здесь попробуйте это

$lastClass = 'fa-cubes';
    $('.dropdown-item').click(function () {
        $rootElement = $(this).parent().parent().parent().parent().find('.dropdown-toggle')[0];
        $(this.classList).each(function (index, item) {
            if (item.match('(^|\s)(fa\-[^\s]*)'))
            {
                console.log($rootElement);
                if ($($rootElement).hasClass($lastClass)) {
                    $($rootElement).removeClass($lastClass);
                }
                $lastClass = item;
                $($rootElement).addClass(item);

            }
        })
    })

Answer 2

• добавить событие onclick для каждого элемента
• найти / проанализировать текущий fa-значок из строки класса
• найти родителя и разобрать его fa-значок изСтрока класса
• уберите старое и добавьте новое!:)

function changeParentIcon(element) {
  var self = this;
  var jElement = $(element);
  var newFa = getFirstFaClass(jElement);
  var jParent = jElement.parent().closest('a').children('i').first();
  var oldFa = getFirstFaClass(jParent);
  jParent.removeClass(oldFa);
  jParent.addClass(newFa);
};

function getFirstFaClass(jElement) {
  var css = jElement.attr('class');
  css = css.substr(css.indexOf('fa-'));
  css = css.split(' ')[0];
  return css;
};

$(() => {
  $('.dropdown-menu .dropdown-item').on('click', function () {
    changeParentIcon(this);
  });
});

.col .defaultColor {
  font-size: 30px;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<li class="nav-item mx-auto dropdown" data-toggle="dropdown" (click)="toggleClick('cubes', cubes)">
  <a class="nav-link dropdown" data-toggle="dropdown" href="#" [ngClass]="{active: cubes}">
    <i class="fa fa-cubes defaultColor dropdown-toggle" data-toggle="dropdown">
    </i>
    <div class="dropdown-menu ">
      <div class="row">
        <div class="col">
          <i class="fa fa-arrow-up defaultColor dropdown-item"></i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-down defaultColor dropdown-item"></i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-right defaultColor dropdown-item"></i>
        </div>
        <div class="col">
          <i class="fa fa-arrow-left defaultColor dropdown-item"></i>
        </div>
        <div class="col">
          <i class="fa fa-long-arrow-right defaultColor dropdown-item"></i>
        </div>
        <div class="col">
          <i class="fa fa-long-arrow-left defaultColor dropdown-item"></i>
        </div>
      </div>
    </div>
  </a>
</li>