2

我是 javascript 的新手，正在尝试根据子 div 中的值范围向父 div 添加一个类（这样我就可以使用 Metafizzy Isotope 排序插件）。

这是HTML代码：

<div class="product-list">
    <div class="hidden-price">Number Here</div>
</div>
<div class="product-list">
    <div class="hidden-price">Number Here</div>
</div>
<div class="product-list">
    <div class="hidden-price">Number Here</div>
</div>

这是jQuery函数：

$('.hidden-price').each(function() {
if(this.text() < 5000) {
    $(this).closest('.product-list').addClass('Under5k');
}
else if (this.text() > 4999 && this.text() < 10000) {
    $(this).closest('.product-list').addClass('Under10k');
}
else {
    $(this).closest('.product-list').addClass('Over10k');
}
});

这是一个 jsfiddle 的链接：http: //jsfiddle.net/jeremyccrane/gwYPw/

谢谢！

更新：

我在 jsFiddle 上错误地大写了我的课程。它已被捕获并已更新以及下面的正确答案。

4

6 回答 6

3

这text()是一个 jQuery 方法，因此您需要将其应用于 jQuery 对象。
因此this.text()，您需要使用$(this).text().

您可以使用此功能来实现它（更简洁的版本：P）：

$('.hidden-price').each( function() {
    var size = $(this).text();
    if (size < 5000) {
        $(this).parent('.product-list').addClass('Under5k');
    } else if (size < 10000) {
        $(this).parent('.product-list').addClass('Under10k');
    } else {
        $(this).parent('.product-list').addClass('Over10k');
    }
});

小提琴

于 2013-01-11T06:09:06.990 回答
2

更新和工作的 JsFiddle 代码

工作代码 

$('.hidden-price').each(function() {
    if($(this).text() < 5000) {
                    $(this).parent('div').addClass('under5k');
                }
                else if ($(this).text() > 4999 && $(this).text() < 10000) {
                    $(this).parent('div').addClass('under10k');
                }
                else {
                    $(this).parent('div').addClass('over10k');
                }
});

代码中的更改

  1. 将功能更改为 Parent 而不是最接近
  2. 小写的类名“over10k”
  3. 将“this.text()”更改为“$(this).text()”
于 2013-01-11T06:05:38.747 回答
0

你可以这样做 ：

$('.hidden-price').each(function() {
if(this.text() < 5000) {
    $(this).parents('div:first').addClass('Under5k');
}
else if (this.text() > 4999 && this.text() < 10000) {
    $(this).parents('div:first').addClass('Under10k');
}
else {
    $(this).parents('div:first').addClass('Over10k');
}
});
于 2013-01-11T06:05:55.947 回答
0

您实际上并没有那么远，您只需要记住这.text()是一个 jquery 方法。要访问它，您必须附加this到一个jquery 对象（$(this).etc而不是this.etc）。下面的代码对我来说很好：

$('.hidden-price').each(function() {
  if($(this).text() < 5000) {
          $(this).closest('.product-list').addClass('Under5k');
        }
        else if ($(this).text() > 4999 && $(this).text() < 10000) {
          $(this).closest('.product-list').addClass('Under10k');
        }
        else {
          $(this).closest('.product-list').addClass('Over10k');
        }
});

演示

于 2013-01-11T06:12:07.410 回答
0

您需要parse文本，int然后您可以比较这些值：

$('.hidden-price').each(function () {
   if (parseInt($(this).text()) < 5000) {
        $(this).closest('.product-list').addClass('under5k');
   } else if (parseInt($(this).text()) > 4999 && parseInt($(this).text()) < 10000) {
        $(this).closest('.product-list').addClass('under10k');
   } else {
        $(this).closest('.product-list').addClass('over10k');
   }
});

在这里查看小提琴：http: //jsfiddle.net/gwYPw/15/

尽管您js几乎是正确的，但您只需要修改一件事，那就是：

更改this为$(this)和您的class initials are started with lowercase alphas

$('.hidden-price').each(function() {
    if($(this).text() < 5000) {
          $(this).closest('.product-list').addClass('under5k');
         //^^^^^^------------------------------------^----------hope you get it.
    } else if ($(this).text() > 4999 && $(this).text() < 10000) {
         $(this).closest('.product-list').addClass('under10k');
    } else {
         $(this).closest('.product-list').addClass('over10k');
    }
});
于 2013-01-11T06:12:33.813 回答
0

考虑这一点的更简单的方法可能是首先向.product-list元素添加一个类，然后根据里面的内容决定要添加什么类。

$(".product-list").addClass(function () {
  var val = $(this).find(".hidden-price").text();
  if (val < 5000) {
    return "Under5k"
  }
  if (val < 10000) {
    return "Under10k"
  }
  return "Over10k";
});
于 2013-01-11T06:24:18.150 回答