Question

假设这个结构：

<div class="item price-class">
  <div class="product-box">
  <h2 class="price">340</h2>
  </div>
</div>

<div class="item price-class">
  <div class="product-box">
  <h2 class="price">450</h2>
  </div>
</div>

<div class="item price-class">
  <div class="product-box">
  <h2 class="price">870</h2>
  </div>
</div>

如何将名称.price-class更改为.340-price，.450-price，.870-price（并且能够将其应用于动态的多个项目？

Answer 1

选中 Demo Fiddle

$('.price').each(function(){

    $(this).parents('.price-class').removeClass('price-class').addClass($(this).html()+'-price');
});

您需要使用 .removeClass() 和 .addClass() 。

Answer 2

也许那样：

$('.price-class').each(function(){
    var $this = $(this);
    $this
        .removeClass('price-class')
        .addClass($this.find('.price').text() + '-price');
});

文档：

addClass()

removeClass()

each()

Answer 3

使用jQuery：

$("div.item").each(function() {
    var element = $(this).find(".price");
    var price = element.text();
    element.removeClass("price");
    element.addClass(price + "-price");
});

Answer 4

使用jQuery

$(document).ready(function(){

    $(".price-class").each(function(){
        price = $(this).text();
        $(this).removeClass("price-class").addClass(price+"-class");
    })

});

Answer 5

看看这个小提琴：http://jsfiddle.net/3yvAW/

$(".item .product-box .price").each(function(ind, el) {
    var txt = $(el).text();
    $(el).closest(".item").addClass(txt + "-price");
});

根据另一个div的内容更改类的名称

5 个答案: