Как условно переместить элемент списка

Question

У меня есть ниже html и уникальный идентификатор для этого html это span текст Reports

<ul>
    <li class="menu-heading">
        <svg viewBox="0 0 100 100">
            <use xlink:href="#doc"></use>
        </svg><span class="menu-heading-title">Reports</span></li>
    <li class="menu-link"><a title="Doors report" class="" href="/Reports/show.do?id=1">Doors report</a></li>
    <li class="menu-link"><a title="Walls Report" class="" href="/Reports/show.do?id=2">Walls Report</a></li>
    <li class="menu-link"><a title="Windows Report" class="" href="/Reports/show.do?id=3">Windows Report</a></li>
    <li class="menu-link"><a title="Tables Report" class="" href="/Reports/show.do?id=4">Tables Report</a></li>
    <li class="menu-link"><a title="Chairs Report" class="" href="/Reports/show.do?id=5">Chairs Report</a></li>
</ul>

В приведенном выше html Я всегда хочу Doors report чтобы показать над Tables Report, если он существует, иначе Tables Report должен быть последним

Ниже желаемое html, если Tables Report существует

<ul>
    <li class="menu-heading">
        <svg viewBox="0 0 100 100">
            <use xlink:href="#doc"></use>
        </svg><span class="menu-heading-title">Reports</span></li>
    <li class="menu-link"><a title="Walls Report" class="" href="/Reports/show.do?id=2">Walls Report</a></li>
    <li class="menu-link"><a title="Windows Report" class="" href="/Reports/show.do?id=3">Windows Report</a></li>
    <li class="menu-link"><a title="Doors report" class="" href="/Reports/show.do?id=1">Doors report</a></li>
    <li class="menu-link"><a title="Tables Report" class="" href="/Reports/show.do?id=4">Tables Report</a></li>
    <li class="menu-link"><a title="Chairs Report" class="" href="/Reports/show.do?id=5">Chairs Report</a></li>
</ul>

Ниже желаемое html если Tables Report не существует

<ul>
    <li class="menu-heading">
        <svg viewBox="0 0 100 100">
            <use xlink:href="#doc"></use>
        </svg><span class="menu-heading-title">Reports</span></li>
    <li class="menu-link"><a title="Walls Report" class="" href="/Reports/show.do?id=2">Walls Report</a></li>
    <li class="menu-link"><a title="Windows Report" class="" href="/Reports/show.do?id=3">Windows Report</a></li>
    <li class="menu-link"><a title="Doors report" class="" href="/Reports/show.do?id=1">Doors report</a></li>
</ul>

Может кто-нибудь помочь мне заставить его работать с jQuery?

Answer 1

Обновлено :

const spanText = 'Reports'
const tablesReportText = 'Tables Report'
const doorsReportText = 'Doors report'

const $myList = $('ul > *:contains(${spanText})').parent();

const $tablesReport = $myList.find('li a:contains(${tablesReportText})')

// if exists element with tablesReportText then will insert before it
if ($tablesReport[0]) {
  const $doorsReport = $myList.find('li a:contains(${doorsReportText})')
  $doorsReport.parent().insertBefore($tablesReport.parent())
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-heading">
      <svg viewBox="0 0 100 100">
      <use xlink:href="#doc"></use></svg>
      <span class="menu-heading-title">Reports</span>
  </li> 
  <li class="menu-link"><a title="Doors report" class="" href="/Reports/show.do?id=1">Doors report</a></li>
  <li class="menu-link"><a title="Walls Report" class="" href="/Reports/show.do?id=2">Walls Report</a></li>
  <li class="menu-link"><a title="Windows Report" class="" href="/Reports/show.do?id=3">Windows Report</a></li>
  <li class="menu-link"><a title="Tables Report" class="" href="/Reports/show.do?id=4">Tables Report</a></li>
  <li class="menu-link"><a title="Chairs Report" class="" href="/Reports/show.do?id=5">Chairs Report</a></li>
</ul>

Answer 2

Сделать таблицы, сообщающие о существующем состоянии по умолчанию. Затем поместите класс no-tables или что-то в <ul>. Затем используйте css, чтобы скрыть отчет о столах и стульях для класса без столов. Что-то вроде:

.no-tables {
   #tables-report { display: none; } /* this id needs to exist on that report li */
   #chairs-report { display: none; } /* this id needs to exist on that report li */
}

Затем используйте следующий jQuery, чтобы удалить этот класс и показать столы и стулья, если этот отчет существует:

if ($('#tables-report').length > 0) {
    $('ul').removeClass('no-tables');
}

Чтобы переместить отчет о дверях, я сделать что-то вроде этого:

if $('#doors-report').length > 0) {
   $('#doors-report').before($('#walls-report'));
}

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