Question

我现在被困在这整整一个下午。

所以我有一个显示产品列表的网上商店，而不是在这里发布代码，我会在概念上做到这一点，以简化问题。希望有人能指出我正确的方向。

我有一个div类列表，如下所示：

<div class="product-container">
    <div class="product-price">Price info</div>
</div>

<div class="product-container">
    <div class="product-price">Price info</div>
    <div class="production-options">
        <select id="selectoptions1" name="product1" class="attribute_list">
          <option value="Colour (please select)">Colour (please select)</option>
          <option value="White">White</option>
          <option value="Navy Blue">Navy Blue</option>
        </select>
    </div>
</div>

<div class="product-container">
    <div class="product-price">Price info</div>
</div>

您会注意到中间容器有一个子类production-options。我想编写一个JS函数来检测产品容器是否有一个名为product-options的子项，如果存在，则将product-price的填充设置为20px或其他。

所以javascript看起来像这样。

if($( ".product-options")) {
    $( ".product-price" ).css( "padding-top", "20px" );
}

现在这将影响具有类名product-price的所有元素，如何使其仅影响具有兄弟product-price的类product-options？（使用ID不是一个选项，因为这些是由virtmart生成的自定义字段/属性）。

Answer 1

使用filter和next的组合：

$( ".product-price" ).filter(function() {
    return $(this).next(".production-options").length;
});

filter将确保只返回符合条件的product-price个元素。 next将确保DOM中的下一个兄弟有一个类production-options。如果product-price可以在任何地方（而不仅仅是下一个），您可以使用siblings选择器代替：

$( ".product-price" ).filter(function() {
    return $(this).siblings(".production-options").length;
});

Answer 2

您可以尝试以下代码：

$.each($('.product-container'), function() {
    var $this = $(this);
    if($this.find( ".product-options").length) {
         $this.find('.product-price').css( "padding-top", "20px" );
    }
});

Answer 3

一个简单的解决方案是定位production-options元素然后找到之前的product-price元素

$('.production-options').prev('.product-price').css( "padding-top", "20px" );

演示：Fiddle

Answer 4

使用.parents选择父级。

$(".production-options").parents(".product-container");

使用.prev直接选择.product-price

$(".production-options").prev(".product-price");

使用javascript来定位兄弟元素

4 个答案: