jQuery pobiera wysokość elementu z właściwością display:none

Question 1

Czy istnieje prosty sposób na uzyskanie wysokości nadrzędnego div, w którym ukryty jest div podrzędny? Jeśli nie, jaka może być najtrudniejsza droga do osiągnięcia takiego wyniku?

PS: Wiem, że ten temat może się powtarzać, ale inne tematy, które znalazłem, były z najlepszymi odpowiedziami z wynikiem negatywnym.

var getHeight = $(".parent").height();

console.log(getHeight);

.parent{
  position:absolute;
  top:0;
  left:0;
}
 
.visibleChild{
  position:relative;
  height:20px;
  background-color:red;
}
 
.hiddenChild{
  display:none;
  height:20px;
  background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
  <div class="visibleChild">
    This div is visible.
  </div>
  <div class="hiddenChild">
    This div is hidden.
  </div>
</div>

javascript jquery css

1

George Smith 1 listopad 2018, 03:37

Answer

Z pewnością możesz uzyskać wzrost rodzica, gdy element potomny nie jest wyświetlany, ale brzmi to tak, jakbyś chciał uzyskać wzrost rodzica, gdy wszystkie wzrosty dzieci są uwzględnione. W takim przypadku możesz ukryć dziecko, ale wyświetlić, złapać wzrost i cofnąć:

/* parentSelector: selector we wish to know its height
 * childSelector:  children to display when measuring parent
 */ 
function getHeight(parentSelector, childSelector) {
    var parent = $(parentSelector);
    var children = parent.children(childSelector);
    var styleState = [];

    //set state
    children.each(function (i) {
        let c = $(this);
        styleState[i] = c.css(['display', 'visibility']);
        c.css({ display: '', visibility: 'hidden' });
    });

    var height = parent.css('height');
    
    //revert state
    children.each(function (i) {
        let { display, visibility } = styleState[i];
        $(this).css({ display, visibility });
    });

    return height;
}

$('#test > div').hide();
console.log(getHeight('#test', 'div'));

#test { background: brown; padding: 1em }
#test > div { height: 50px; background: yellow; margin: 1em 0 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">
    <span>span</span>
    <div>div</div>
    <div>div</div>
</div>

Mam nadzieję, że to pomoże!

1

Rafael 1 listopad 2018, 04:43

Co zrobić, jeśli niektóre z divów podrzędnych nie są display: 'block'?

–

Hikarunomemory

1 listopad 2018, 04:21

1

Ups, naprawiłem to :) Chciałem przywrócić domyślny ekran każdego dziecka. To już naprawione.

–

Rafael

1 listopad 2018, 04:43

Question 2