在多个CSS类的EACH元素上具有相等的高度和窗口调整大小功能

Question

Not an expert on coding, find a solution on how to use "each". But then suck on combining with the equal heigh line. Please help! After everything load, "slick-list" is the one that equal with the height of the tallest slide. Then I want that/ each "carousel-wrap-x band" equal on it own "slick-list".

 $("[class*='carousel-wrap-'] .carousel").each(function() { $(this).slick({ appendArrows: $(this).siblings('.carousel-control'), other functions }); $(this).siblings({ var offsetHeight = $(this).siblings('.slick-list').outerHeight(); $(this).siblings('.carousel .band').outerHeight(offsetHeight); $( window ).resize(function() { $(this).siblings('.carousel .band').css("height", "100%") var offsetHeight = $(this).siblings('.slick-list').outerHeight(); $(this).siblings('.carousel .band').outerHeight(offsetHeight); }); }); }); 

 <div class="carousel-wrap-1"> <div class="carousel-control"></div> <div class="carousel"> <div class="slick-list"> <div class="band">1</div> <div class="band">2</div> <div class="band">3</div> </div> </div> </div> 

Answer 1

Not sure I totally understand what you're going for - definitely a lot going wrong here, I applaud your adventurousness if you're relatively new to code though! I'm familiar with both slick slider and jquery's "each" - so here are a few things I see going wrong.

The jquery function .each() takes in two parameters - index and element. I think index is the index of the array you'd get back from $("[class*='carousel-wrap-'] .carousel") - I don't generally use that - and element is the element returned by the selector, sans jquery wrappage.

I can't remember what "this" is going to refer to but looking in my own code I'd be using the $(element) in its place eg

$(".selector").each(function(index, element) {
    $(element).addClass("do-a-thing");
});

As for this bit - $(this).siblings( {... } ); First off, siblings takes in a selector - I'm guessing that passing in a block of code like that just blows it up?

Second, the containing .each()'s parent selector is for "[class*='carousel-wrap-'] .carousel" - so that'd look for the siblings of the carousel, which is just carousel-control, which is clearly not what you're looking for.

Lastly, the window event listener - if you want that to apply to a specific object, I believe you'll need .bind(this) (or .bind($(element)) or whatever) after the function call like so:

  $( window ).resize(function() {
    $(this).siblings('.carousel .band').css("height", "100%")
    var offsetHeight = $(this).siblings('.slick-list').outerHeight();
    $(this).siblings('.carousel .band').outerHeight(offsetHeight);
  }.bind(this));

Otherwise I think "this" will be the window

Still not 100% on what you're trying to do - educated guess, you're trying to make the bands inside slick list equal height, and slick-list is a carousel slide (so it's a slide with 3 columns or somesuch)?

If that's the case, have you tried experimenting with making it a flex box? Could be a problem you could solve with CSS instead of javascript, and that's always preferable!

Good luck and I hope that helps!