Using either javascript to target sibling elements

Question

I been stuck on this for a full afternoon now.

So I have a webshop that displays a product list, rather than post the code here, I will do it conceptually, to simplify the problem. Hoping someone could point me in the right direction.

I have a list of div classes like the following:

<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>

You will notice that the middle container has a child class production-options. I want to write a JS function that will detect whether a product-container has a child called product-options, If there is, then set the padding of product-price to 20px or whatever.

So javascript would look like this.

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

Now this will affect all the elements with class name product-price, how do I make it so that it will only affect the class product-price with a sibling product-options? (using ID's is not an option, as these are custom fields/attributes generated by virtuemart).

CodingIntrigue · Accepted Answer · 2014-02-10 08:20:00Z

2

Using a combination of filter and next:

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

filter will ensure only product-price elements matching the criteria are returned. next will ensure the next sibling in the DOM has a class production-options. If the product-price can be anywhere (not just directly next) you can use the siblings selector instead:

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

answered Feb 10, 2014 at 8:20

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RHK-S8 Over a year ago

thanx! i appreciate the explanation, i was lost for a while...but this is exactly what i needed! good explanation. In fact they all are :)

Felix · Accepted Answer · 2014-02-10 08:20:48Z

1

You can try this code:

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

answered Feb 10, 2014 at 8:20

Felix

38.2k8 gold badges45 silver badges56 bronze badges

1 Comment

jfriend00 Over a year ago

if($(this).find( ".product-options")) is always true.

Arun P Johny · Accepted Answer · 2014-02-10 08:21:12Z

1

One easy solution sis to target the production-options element then find the previous product-price element

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

Demo: Fiddle

answered Feb 10, 2014 at 8:21

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Derek 朕會功夫 · Accepted Answer · 2014-02-10 08:21:23Z

1

Use .parents to select the parent.

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

Use .prev to directly select .product-price

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

answered Feb 10, 2014 at 8:21

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Collectives™ on Stack Overflow

Using either javascript to target sibling elements

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related