将类添加到与标签文本匹配的父div

Question

我想为每个父class添加一个div，并让该类与div中label的内容匹配，并在每个单词之间添加一个连字符。

在下面的示例中，第一个div将具有类child-1-name，第二个child-1-last-name，第三个child-1-age。任何方向将不胜感激！

请注意，HTML是自动生成的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>

Answer 1

首先，您将获得所有label元素。在获取父div元素并将textContent的{​​{1}}添加为该label的{​​{1}}之后。

className

div

Answer 2

最简单的方法是遍历所有.wrapable元素，检索最接近的div祖先，然后将其上的类设置为label的文本，在空格上进行基本的replace()操作，如下所示：

$('.wrapable').each(function() {
  var $el = $(this);
  $el.closest('div').addClass($el.text().trim().replace(/\s+/g, '-'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>

Answer 3

您可以获取每个.wrapable类并将其添加到其closest'div'中。
使用正则表达式将空格替换为连字符。

$('.wrapable').each(function() {
  var _this = $(this);

  _this.closest('div').addClass(_this.text().replace(/\s+/g, '-'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>

Answer 4

这是一种非常简单的方法：只需查找文本，删除外部的空格，转换为小写字母，然后将所有其他空格替换为破折号即可。

$(".wrapable").each(function(i, el) {
  var className = el.innerText.trim().toLowerCase().replace(/\s+/g, '-');
  $(el).closest('div').addClass(className);
});

.child-1-name {background: pink;}
.child-1-last-name { background: lightgreen;}
.child-1-age {background: lightblue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>

Answer 5

请检查代码，希望对您有所帮助。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"/></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"/></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"/></span>
  </span>
</div>

<script>
  $(document).ready(function() {
    $(".wrapable").each(function() {
      //   alert($(this).text());
      var data = $(this).text();
      $(this)
        .closest("div")
        .addClass(
          $(this)
            .text()
            .trim()
            .replace(/\s+/g, "-")
        );
    });
  });
</script>

Answer 6

这可能是不使用jQuery的普通JavaScript解决方案：

看看我的评论以了解发生了什么事。

toarray(document.getElementsByTagName('div')).forEach(div => {  // loop throug each parent
  toarray(div.getElementsByTagName('label')).forEach(label => {  // loop throug each lable
    addclass(label.innerText, div);  // get innerText of label and call the function
  });
});

function toarray(items) {
  return Array.prototype.slice.call(items);
  // done this to make 'forEach' available on 'getElementsByTagName'
}

function addclass(src, target) {
  src = src.replace(new RegExp(' ', 'g'), '-');  // replace all ' ' with '-'
  target.classList.add(src);  // add class to parent div
  
  console.log(target);  // output to show that its working
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 last name</label>
    <span class="net"><input type="text"></span>
  </span>
</div>
<div>
  <span class="req"></span>
  <span>
    <label class="wrapable">child 1 age</label>
    <span class="net"><input type="text"></span>
  </span>
</div>