Разделите имя родительского класса и добавьте к каждому дочернему элементу - PullRequest
Новая
       1

Разделите имя родительского класса и добавьте к каждому дочернему элементу

2 голосов
/ 19 марта 2019

Я пытаюсь найти способ отделить значения от родительского имени класса и добавить каждое отдельное значение к каждому дочернему элементу внутри родительского элемента (количество дочерних элементов является переменным).

Могут быть имена классов с одним или несколькими значениями. 

<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>

Что былучший способ справиться с этим?

Спасибо.

Ответы [ 3 ]

1 голос
/ 19 марта 2019

Вы можете попробовать использовать 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>
0 голосов
/ 19 марта 2019 
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/

0 голосов
/ 19 марта 2019 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...