Question

尝试将文本替换为div的类。表示从.label （text1或任何文本）中查找文本，然后将其替换为类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()添加课程

$('.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()可以添加课程。或者使用attr()方法。

如何替换文本以使div成为一个类

3 个答案: