jquery each() not reconizing $ (this)

Question

Я пытаюсь создать выравниватель высоты столбца, который работает, если он является единственным экземпляром на странице, но если есть более одного экземпляра, скрипт, похоже, игнорирует $(this) в each(){function.

Вот HTML:

<div class="equalizer" data-cols="2"> 

     <div class="equalized ">Content</div> 
     <div class="equalized ">Content</div> 
     <div class="equalized ">Content</div> 
     <div class="equalized ">Content</div> 

    </div> 

И JQuery:

$(".equalizer").each(function() { 
     var colClass = 'eq-col-'+$(this).data("cols"); 
     var height = parseInt($(this).css('height')); 

     $(this).children().each(function() { 
      $(this).css('height',height + 'px'); 
      $(this).addClass(colClass); 
     });  
    }); 

Это линия, которая, как представляется, быть игнорировать более, что в одном случае: var height = parseInt($(this).css('height')); Это универсальные идентификаторы, чтобы получить высота обертки .equalizer для этого экземпляра, которая, в свою очередь, устанавливается как высота для каждого ребенка equalized.

Похоже, что сценарий приобретает высоту от самой высокой обертки equalizer на странице и устанавливает высоту для всех детей equalized на странице, равной этой высоте, независимо от того, в какой оболочке она находится ... Я был возиться с этим в течение нескольких часов и я в растерянности ... любая помощь была бы весьма признательна.

Answer 1

JQuery Каждая функция также предоставляет вам индекс и элемент, чтобы вы могли напрямую обращаться к текущему элементу, не используя это. Jquery Each Document

$(".equalizer").each(function(index,item) { 
     var colClass = 'eq-col-'+$(item).data("cols"); 
     //var height = parseInt($(item).css('height')); 
      var height = $(item).height(); 
     $(item).children().each(function(i,child) { 
      // $(child).css('height',height + 'px'); 
       $(child).height(height); 
      $(child).addClass(colClass); 
     });  
    }); 

Кроме того, почему вы разборе высоту, когда вы можете назначить его непосредственно ... Кроме того, я не думаю, что вам нужно добавить + «точек»

Answer 2

Я вижу вашу проблему. Это то, что вы могли бы сделать.

$(".equalizer").each(function() { 
 
    var colClass = 'eq-col-' + $(this).data("cols"); 
 
    //Get all the children height 
 
    var heights = $(this).children().map(function() { 
 
    return $(this).height(); 
 
    }); 
 
    //extract max out of the children 
 
    var height = Math.max.apply(Math, heights); 
 

 
    $(this).children().each(function() { 
 
    $(this).css('height', height + 'px'); 
 
    $(this).addClass(colClass); 
 
    }); 
 
});

.equalized { 
 
    border: 1px solid red; 
 
} 
 
.equalized { 
 
    margin: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="equalizer " data-cols="2"> 
 

 
    <div class="equalized "> 
 

 
    <div>Sample Content 
 
    </div> 
 
    <div>Sample Content 
 
    </div> 
 

 
    </div> 
 
    <div class="equalized ">Content</div> 
 
    <div class="equalized ">Content</div> 
 
    <div class="equalized ">Content</div> 
 

 
</div> 
 

 
<div class="equalizer" data-cols="2"> 
 

 
    <div class="equalized ">Content1</div> 
 
    <div class="equalized ">Content3</div> 
 

 

 
</div>

Answer 3

Кроме того, вы также можете сделать это без JavaScript. вместо того, чтобы устанавливать высоту программно, вы можете использовать display: table for container и display: table-cell для детей.

Вот отображения документации на MDN

.equalized { 
 
    border: 1px solid red; 
 
    margin: 2px; 
 
} 
 
.equalizer { 
 
    display: table; 
 
} 
 
.equalized { 
 
    display: table-cell; 
 
}

<div class="equalizer " data-cols="2"> 
 

 
    <div class="equalized "> 
 

 
    <div>Sample Content 
 
    </div> 
 
    <div>Sample Content 
 
    </div> 
 

 
    </div> 
 
    <div class="equalized ">Content</div> 
 
    <div class="equalized ">Content</div> 
 
    <div class="equalized ">Content</div> 
 

 
</div> 
 

 
<div class="equalizer" data-cols="2"> 
 

 
    <div class="equalized ">Content1</div> 
 
    <div class="equalized ">Content3</div> 
 

 

 
</div>