Ссылочный идентификатор с использованием суффикса класса Integer

Question

Положение:

Есть много флажков, это только малая часть дерева:

<li class="main">
    <input type="checkbox" id="cat_6" class="parent_cat_0" name="local[]">
    <label class="strong" for="cat_6">Stellenbeschreibungen</label>
    <ul>
        <li class="main">
            <input type="checkbox" id="doc_31" class="parent_cat_6" name="local[]">
            <label for="doc_31">Stellenbeschreibung Marketing/Vertrieb</label>
        </li>
    </ul>
</li>

Я хочу сделать селектор для родителя этого флажка, который имеет класс "parent_cat_6"

Итак, окончательный селектор должен быть:

let parent = $('#cat_6');

Но я не знаю, как обрезать 'parent_' из отмеченного флажка класса.

child has class="parent_cat_6"
parent has id="cat_6"

Нужно ли использовать регулярное выражение, чтобы сделать селектор для родителя, или есть другой способ?

UPDATE: Это работает:

selected.attr('class').split(' ').slice(-1)[0].substr(7);

Но это уродливо, любые улучшения приветствуются!

Answer 1

Суффиксированные или префиксированные ClassNames не являются лучшими, когда вам приходится иметь дело с ссылками в JavaScript.

Сумасшедший селектор

Просто нацелиться на такой суффиксированный класс - селектор усложняется:

[class^="parent_cat_"], [class*=" parent_cat_"]

в таком случае лучше использовать два класса, один из которых является общимко всем вашим элементам и конкретному: class="cat_checkbox parent_cat_42".Таким образом, селектор становится таким простым, как

.cat_checkbox   // BETTER - Common class for all checkboxes

Слишком много работы для извлечения суффикса Integer

Проблема в том, что className можетДом много имен, и найти нужное может быть сложно.
Как получить 42 из class="foo bar fooBar parent_cat_42 bla_bli_40"?

• Читать полностью classList
• Найдите тот, который соответствует этому формату parent_cat_\d+
• Получить его индекс
• Извлечь его
• Получить цифры
• Наконец преобразовать его в некоторый идентификатор #cat_[ID]

const findIndex_parent_cat = klass => /^parent_cat_\d+$/.test(klass);
const findNum_parent_cat = klass => klass.replace(/\D+/, '');


$('[class^="parent_cat_"], [class*=" parent_cat_"]').on('change', function() {
  const klasses = $(this).attr('class');
  const ID = klasses.match(/(?:^|\s)parent_cat_(\d+)(?:$|\s)/)[1];
  const cat_ID = `#cat_${ID}`;
  console.log(`ID: ${cat_ID}`);
  $(cat_ID).prop({checked: this.checked});
});

<ul>
  <li class="main">
    <input type="checkbox" id="cat_6" class="something parent_cat_0 bla" name="local[]">
    <label class="strong" for="cat_6">Stellenbeschreibungen</label>
    <ul>
      <li class="main">
        <input type="checkbox" id="doc_31" class="blue red inp parent_cat_6 foo bar" name="local[]">
        <label for="doc_31">Stellenbeschreibung Marketing/Vertrieb</label>
      </li>
    </ul>
  </li>
</ul>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

Получить суффикс класса Integer с помощью Regex

или это можно сделать с помощью Regex (?:^|\s)parent_cat_(\d+)(?:$|\s):

const findIndex_parent_cat = klass => /^parent_cat_\d+$/.test(klass);
const findNum_parent_cat = klass => klass.replace(/\D+/, '');


$('[class^="parent_cat_"], [class*=" parent_cat_"]').on('change', function() {
  const klasses = [...this.classList];
  const klassIndex = klasses.findIndex(findIndex_parent_cat); // Get index
  const klass = klasses[klassIndex]; // Find it in classList
  const ID = findNum_parent_cat(klass); // Now let's extract the N number ID
  const cat_ID = `#cat_${ID}`; // Finally we have the ID...
  
  console.log(`${klass} found in classList at index ${klassIndex}. ID: ${cat_ID}`);
  
  $(cat_ID).prop({checked: this.checked});
});

<ul>
  <li class="main">
    <input type="checkbox" id="cat_6" class="something parent_cat_0 bla" name="local[]">
    <label class="strong" for="cat_6">Stellenbeschreibungen</label>
    <ul>
      <li class="main">
        <input type="checkbox" id="doc_31" class="blue red inp parent_cat_6 foo bar" name="local[]">
        <label for="doc_31">Stellenbeschreibung Marketing/Vertrieb</label>
      </li>
    </ul>
  </li>
</ul>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

Вместо этого используйте атрибут data-*!

Точно, вот римейк вышеупомянутого безумия.
И да, смотрите HTML какиспользовать <label> без атрибута for:

$('[data-cat]').on('change', function() {

  const cat_ID = $(this).attr('data-cat'); // Finally we have the ID...
  console.log(`ID: ${cat_ID}`);
  
  $(cat_ID).prop({checked: this.checked});
});

<ul>
  <li class="main">
    <label>
      <input type="checkbox" id="cat_6" data-cat="#cat_0" name="local[]">
      Stellenbeschreibungen
    </label>
    <ul>
      <li class="main">
        <label>
          <input type="checkbox" id="doc_31" data-cat="#cat_6" name="local[]">
          Stellenbeschreibung Marketing/Vertrieb
        </label>
      </li>
    </ul>
  </li>
</ul>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>