根據子div中的值向父div添加一個類

我是javascript的新手，我試圖添加一個類到父div（所以我可以利用Metafizzy Isotope排序插件），基於範圍子div內的值。根據子div中的值向父div添加一個類

下面是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我的班。它被捕獲並且已被更新以及下面的正確答案。

來源

2013-01-11 Jeremy Crane

的text()是一個jQuery方法，所以你需要申請它到一個jQuery對象。
因此，而不是this.text()，您需要使用$(this).text()。

您可以使用此功能（A少許清潔劑版本：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

來源

2013-01-11 06:09:06

這工作完美！我也錯誤地編寫了jsFiddle示例中的類。 –

@JeremyCrane：噢，忘了看的CSS。更新了小提琴鏈接:) –

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

發生在你的代碼

變化功能，家長，而不是最近的
類名在較小的情況下，「over10k」
更改「this.text（）」到「$（本）的.text（）」

來源

2013-01-11 06:05:38

大有趕超@Pranay。這與我對$（this）.text（）的錯誤用法解決了問題。 –

@JeremyCrane - welcome..i更新的答案與你的mistake..dont忘記給予好評和標記答案接受，如果它的工作對你.. –

，如果我能我會給予好評。首先發布到Stackoverflow。 –

，你可以這樣做：

$('.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-11 06:05:55 ankur

你實際上並沒有那麼遙遠，你只需要記住.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

來源

2013-01-11 06:12:07 Daedalus

感謝@Daedalus。 –

您需要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幾乎是正確的，你只需要一件事修改和Tha t是：

變化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-11 06:12:33 Jai

解析實際上這裏不需要。 – Daedalus

你是正確的，但我只是覺得這樣做的方式。:) – Jai

感謝@Jai。實際上正被從Shopify輸出的代碼已被解析成一個整數。 –

也許想這是一個簡單的方法是先從添加類的.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-11 06:24:18 ericponto

不是一個壞主意。我從來沒有想過，從這個角度接近。 –

根據子div中的值向父div添加一個類

回答

相關問題