Question

我是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上。它已被捕获并已更新，以及下面的正确答案。

Answer 1

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');
    }
});

Fiddle

Answer 2

Updated and Working JsFiddle code

工作代码

$('.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');
                }
});

代码中的更改

将功能更改为Parent而非最近的
类名称小写“over10k”
将“this.text（）”更改为“$（this）.text（）”

Answer 3

你可以这样做：

$('.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');
}
});

Answer 4

你实际上并没有那么遥远，你只需要记住.text()是一个jquery方法。要访问它，您必须将this附加到jquery object（$(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');
        }
});

DEMO

Answer 5

您需要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');
    }
});

Answer 6

考虑这个问题的一种更简单的方法是首先向.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";
});

根据子div中的值将类添加到父div

6 个答案: