如何替换文本以制作 class 的 div

Question

正在尝试将文本替换为 div 的 class。表示从 .label （text1 或任何文本） 中查找文本，然后将其替换为 class class="text1" 到父列表 <li> 项，例如<li class="text1">。下面给出的例子

HTML:
这是主要输出 html 代码。

<div id="main-id">
<ul>

<li> <!--List 1-->
<span class="meta">
<div class="label">
<a href="http://lorem.com">text1</a>
</div>
</span>
</li>

<li> <!--List 2-->
<span class="meta">
<div class="label">
<a href="http://lorem.com">text2</a>
</div>
</span>
</li>

</ul>
</div>

通过Jquery/JS输出html像这样：（我想要这个）

<div id="main-id">
<ul>

<li class="text1"> <!--Add class to List 1-->

<span class="meta">
<div class="label">
<a href="http://lorem.com">text1</a> <!--Get class name from here-->
</div>
</span>
</li>

<li class="text2"> <!--Add class List 2-->

<span class="meta">
<div class="label">
<a href="http://lorem.com">text2</a> <!--Get class name from here-->
</div>
</span>
</li>

</ul>
</div>

我正在使用此替换文本 script，但我无法这样做。对其他方法有什么建议吗？
在此先感谢。

Answer 1

您可以使用addClass()添加class

$('.label a').each(function() {
   var $this=$(this);      
   $this.closest('li').addClass($this.text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-id">
  <ul>

    <li>
      <!--List 1-->
      <span class="meta">
<div class="label">
<a href="http://lorem.com">text1</a>
</div>
</span>
    </li>

    <li>
      <!--List 2-->
      <span class="meta">
<div class="label">
<a href="http://lorem.com">text2</a>
</div>
</span>
    </li>

  </ul>
</div>

Answer 2

jsfiddle

function replace(){

    var arr = [];

    $('div .label').each( function(){ // search for divs with a label
        arr.push( $(this).text() );
    });

    // add class to each <li>
    $('li').each( function(index, element){
        $(this).addClass(arr[index]);
    });
}

replace();

Answer 3

每个 $('li)

使用

addClass()可以加上class。或者使用attr()方法。

如何替换文本以制作 class 的 div

How to replace text to make class of a div

html

javascript

jquery

replace

addclass