2


0

.each () dans un élément div, rechercher un élément enfant, définir la hauteur en fonction de son contenu (avancé?)

Je dois trouver chaque ligne de divs et baser la hauteur des h2 sur cette ligne en fonction du h2 qui a le plus de contenu.

J’essaie de parcourir un div (principal) qui co-contient des divs (enfant), dans ce div j’ai des sections (enfants) et dans cette section j’ai un h2.

Maintenant, en fonction du contenu du h2 qui a le plus de contenu, j’ai défini la hauteur des autres h2 avec la bibliothèque jQuery: http://www.tomdeater.com/jquery/equalize_columns/

Je connais certains jQuery, mais pas tellement que je peux comprendre comment faire cela.

Le mieux est de vérifier le lien jsfiddle http://jsfiddle.net/CbNRH/13/. Je n’ai pas fini avec le script. J’essaie d’abord de trouver l’élément h2 et d’écrire sa valeur. Ensuite, j’ai pensé que je passerais à autre chose, mais c’est plus complexe que ma connaissance de jQuery. Toute aide est appréciée.

        depending on my content i use .equalizeCols()
        2


        depending on my content i use .equalizeCols()
        3


        depending on my content i use .equalizeCols()
        6




$('#col-main > div').each(function () {
      var $this = $(this);
      $('#write-out').text($this.child('section').find('h2').val());
});

div.contain { margin-bottom: 10px; background-color: #dddddd; }
div.contain section { padding: 10px; }
div.contain section div h2 { font-size: 12px; width: 80px; background-color: red; }

div#write-out { font-size: 16px; padding: 10px; background-color: #ffcc00; }

3 Answer


11


J’ai pris le code k.honsali et simplifié un peu, donc ma suggestion est la suivante:

$('#col-main > div').each(function () {
    var tmpHeight = 0;
    $(this).find("h2").each(function() {
        tmpHeight = $(this).height() > tmpHeight ? $(this).height() : tmpHeight;
    });
    $(this).find("h2").height(tmpHeight);
});


4


Salaam,

Vous devez boucler deux fois: la première fois pour trouver le nombre le plus élevé H2 et la deuxième fois pour ajuster la hauteur des autres H2. Faisons le:

var maxval = 0;
var maxheight = 0;
$('#col-main > div').each(function () {
      tmp = $(this).children().find('h2').val();
      if(tmp > maxval ) {
        maxval = tmp;
        maxheight = $(this).children().find('h2').css('height');
      }
});

$('#col-main > div').each(function () {
      $(this).children().find('h2').css('height', maxheight);
});

Pourtant, je me demande si ce qui précède pourrait être optimisé.


1


Regardez http://jsfiddle.net/CbNRH/39/, je pense que c’est la meilleure façon de gérer cela sans .equalizeCols ()

'' '' '

Regardez http://jsfiddle.net/CbNRH/38/, je pense que c’est la meilleure façon de gérer cela avec .equalizeCols ()