Question

如何获取.getClass（白色，蓝色等）的内容并将其添加为其父级li代码的类？

我有以下html结构：

<div class="main">
   <ul>
    <li class="even">
         <div class="content">
           <div class="getClass">white</div>
         </div>
     </li>
     <li class="odd">
         <div class="content">
           <div class="getClass">red</div>
         </div>
     </li>
     <li class="even">
         <div class="content">
           <div class="getClass">blue</div>
         </div>
     </li>
     <li class="odd">
         <div class="content">
           <div class="getClass">black</div>
         </div>
     </li>
  </ul>
</div>

我想出了这个：

var str = $( ".getClass" ).text();

下一步是什么？

干杯

Answer 1

选择要修改的元素，使用.each创建循环，然后使用.text()获取每个元素的内容：

$('li').each(function (i, el) {
    var className = $(el).find('#getClass').text();
    $(el).addClass(className)
});

但是您的代码实际上是无效的HTML，您有重复的id属性。因此，请使用类，您几乎不需要id

Answer 2

首先，您的HTML无效。您不能在文档中使用相同id的多个元素。您应该使用class来对元素进行分组。从那里，您可以选择li元素，并为addClass()方法提供一个函数，以返回从子元素的text()生成的必需字符串。试试这个：

$('li').addClass(function() {
  return $(this).find('.getClass').text().trim();
});

$('li').addClass(function() {
  return $(this).find('.getClass').text().trim();
});

.white {
  color: #CCC;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.black {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <ul>
    <li class="even">
      <div class="content">
        <div class="getClass">white</div>
      </div>
    </li>
    <li class="odd">
      <div class="content">
        <div class="getClass">red</div>
      </div>
    </li>
    <li class="even">
      <div class="content">
        <div class="getClass">blue</div>
      </div>
    </li>
    <li class="odd">
      <div class="content">
        <div class="getClass">black</div>
      </div>
    </li>
  </ul>
</div>

Answer 3

您可以使用jQuery方法parent()和addClass()

来实现此目的

jQuery获取div的内容并使其成为其父元素的类

3 个答案: