Question

我试图找到一种方法，用于从父类名中拆分值，并将每个单独的值添加到父类中的每个子对象（子元素的数量是可变的）。

可能有一个值或多个值的类名。

<div class="block-33-33-33-33">
  <div class="card block__col--33"></div>
  <div class="card block__col--33"></div>
  <div class="card block__col--33"></div>
  <div class="card block__col--33"></div>
</div>

或

<div class="block-50-50">
  <div class="card block__col--50"></div>
  <div class="card block__col--50"></div>
</div>

或

<div class="block-100">
  <div class="card block__col--100"></div>
</div>

处理此问题的最佳方法是什么？

谢谢。

Answer 1

您可以尝试通过以下方式使用querySelector()和querySelectorAll()：

var pClass = document.querySelector('div[class^=block]').classList.value.split('-');
pClass.shift(); // remove the first item

document.querySelectorAll('div.card').forEach(function(el, i){
  el.classList.add('block__col--'+ pClass[i]);
});

.block__col--33{
  font-size: 20px;
  color: red;
}

<div class="block-33-33-33-33">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
</div>

Answer 2

let parentDiv = $("body > div")
let parentClassArr = parentDiv.attr('class').split('-')
for (let i = 1; i < parentClassArr.length; i++) {
  parentDiv.children().eq(i - 1).addClass(parentClassArr[0] + '__col--' + parentClassArr[i])
  console.log(parentDiv.children().eq(i - 1).attr('class'))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="block-33-33-33-33">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</body>

Answer 3

const blocks = document.querySelectorAll("[class^=block-]");
blocks.forEach(splitParentClassNameToChildren);

function splitParentClassNameToChildren(parent) {
    const { className } = parent;
  const splitValues = className.match(/(\d\d)/g);
  splitValues.forEach((value, i) => {
    parent.children[i].classList.add(`block__col--${value}`);
  })
}

实际操作=> https://jsfiddle.net/moorthyrweb/z3jLqwn4/14/

拆分父类名称并添加到每个子元素

3 个答案: