使用 Class 后缀整数的参考 ID

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>

我想为具有 class "parent_cat_6"

的复选框的父项创建一个选择器

所以最终的选择器应该是：

let parent = $('#cat_6');

但我不知道如何从选中的复选框 class 中删除 'parent_'。

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

我是否需要使用正则表达式为父级创建选择器，还是有其他方法？

更新： 这有效：

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

但是很丑，欢迎改进！

Answer 1

当您必须处理 JavaScript 中的 references 时，带后缀或前缀的类名并不是最好的选择。

疯狂的选择器

仅针对此类后缀 class - 选择器变得复杂：

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

在这种情况下，您最好使用两个 class，一个对您的所有元素都是通用的，另一个是特定的：class="cat_checkbox parent_cat_42"。这样选择器就变得像

一样简单

.cat_checkbox   // BETTER - Common class for all checkboxes

提取后缀整数工作量太大

问题 是一个 className 可以容纳很多名字，找到想要的名字可能很棘手.
如何从 class="foo bar fooBar parent_cat_42 bla_bli_40" 中得到 42 ？

• 阅读全文classList
• 找到符合此格式的那个parent_cat_\d+
• 检索它的索引
• 提取它
• 获取数字
• 最后将其转换为某个 ID #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>

使用正则表达式得到class后缀整数

或者可以使用正则表达式 (?:^|\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 如何在没有 for 属性的情况下使用 <label>：

$('[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>