Высота элементов 0px
Привет, у меня есть дивы в гармошке:
<a href = "#collapse17" data-quickedit-field-id = "paragraph/17/field_section_title/en/default" class = "field field--name-field-section-title field--type-string field--label-hidden accordion-toggle field--item" data-parent = "#accordion" data-toggle = "collapse">
<h2><strong>Accordion Header</strong></h2>
</a>
<div id = "collapse17" data-quickedit-field-id = "paragraph/17/field_section/en/default" class = "field field--name-field-section field--type-entity-reference-revisions field--label-hidden panel-collapse collapse field--item">
<div class = "panel-body">
<div data-quickedit-field-id = "paragraph/10/field_diagram_title/en/default" class = "field field--name-field-diagram-title field--type-string field--label-hidden p-1 section-title-diagram field--item background-purple" id = "div">INDEPENDENT LEARNING12</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">
<!-- Optional theme -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity = "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin = "anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>
при наведении курсора на элемент div при проверке элемента высота составляет 20 пикселей. Но мой jquery:
$('.section-title-diagram').each(function(){
var $div = $("#div");
var height = $div.height();
var text = $div.text();
console.info("Height: ", height);
console.info("Text: ", text);
});
равно 0. Когда я делаю
var text = $(this).text();
console.info(text);
INDEPENDENT LEARNING12 он действительно выплевывает правильно. Я застрял в том, почему высота моего div равна 0. Я пробовал несколько вещей, но безрезультатно. Любая помощь будет оценена.
пожалуйста, покажите полностью наведенный код
@TylerRoper Я обновил, чтобы показать весь код
@AliNaeimi обновлен, чтобы показать весь код
Это потому, что ваш код, проверяющий высоту, выполняется, когда div невидим.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
потому что вы установили
.collapse {
display: none;
}
в вашем css
изменить для отображения: блок
или установите $('.collapse').show(); в свой код jquery.
Я хочу скрыть свой элемент, но просто получить его высоту. Итак, я жду, пока не щелкну, затем устанавливаю время и позволяю переходу элемента отображаться, прежде чем получить его высоту. Но да, если бы я не хотел скрывать элемент, я бы отобразил блок.
установить $ ('. collapse'). show (); после щелчка, и вы можете получить высоту div.
Так что я сделал это немного лучше. $ ('. collapse'). show () делает так, чтобы при повторном нажатии на аккордеон он не рухнул (тогда вам придется кодировать больше). НО, если вы используете $ ('# collapse17'). On ('shown.bs.collapse', function () {// code}; у меня он отлично работает. jsfiddle.net/xotu9qgj/15
http://jsfiddle.net/xotu9qgj/15/
$('#collapse17').on('shown.bs.collapse', function(){
var diagram_title = $(this).find('.section-title-diagram');
$(diagram_title).each(function(){
var $div = $("#div");
var height = $div.height();
var text = $div.text();
console.info("Height: ", height);
console.info("Text: ", text);
});
});
Привет, Армандо. Я не верю, что вы включили достаточно кода, чтобы мы могли решить эту проблему. Как вы можете видеть здесь, код в вашем вопросе работает должным образом, что означает, что ваша проблема находится в другом месте. Измените свой вопрос, включив в него минимальный, полный, проверяемый пример.