スライド画像の高さ取得方法を教えて下さい。

###スライド画像の高さ取得方法を教えて下さい。
高さがバラバラの画像をスライドさせたいと考えています。
そこで、最初に表示される画像の次にスライドさせる画像の高さを取得する方法がわかりません...
子要素の**.itemがposition:absolute;なので、
親要素である.slide**に高さを指定したいです。

###html

<div class="slide cf">
 <div class="item">
   <img src="img/img_01.png">
 </div>
 <div class="item">
   <img src="img/img_02.png">
 </div>
</div>

###css

.slide {
	width: 400px;
	height: auto;
	position: relative;
	margin: 0 auto;
}

.slide .item {
	width: 360px;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	background: #faa;
}

.slide .item.next {
	left: 50px;
	opacity: 0;
}

.slide .slide_navi {
	width: 100%;
	padding-top: 50%;
	position: absolute;
	top: 0;
}

.slide .slide_navi li {
	width:29px;
	height:55px;
	display: block;
	margin-top: -27.5px;
	line-height: 2em;
	position: absolute;
	top: 50%;
	z-index: 10;
}

.slide .slide_navi li.next {
	right: 0;
	background-image: url(/images/icon_next.png);
	background-repeat: no-repeat;
	background-position: center;
}

.slide .slide_navi li.prev {
	left: 0;
	background-image: url(/images/icon_prev.png);
	background-repeat: no-repeat;
	background-position: center;
}

###javascript
スライドに使用しています。

/変数を定義
var item_parent = ".slide";
var item = item_parent + " > .item";
var item_n = -1;
var item_html = [];
var item_current = 0, item_next = 1, item_preview = 0, max_height = 0, item_html_num = 0;
//ページング関連の変数
var slide_paging = "slide_paging";
var siide_paging_click;

//次のアイテムを出力する
function next_show() {
	if(item_current == item_n){
		item_next = 0;
		item_current = 0;
	} else {
		item_next = item_current + 1;
		item_current ++;
	}
	paging_current();
	$(item_html[item_next]).appendTo(item_parent).addClass("next").css("opacity",0);
}	

//前のアイテムを出力する
function preview_show() {
	if(item_current === 0){
		item_preview = item_n;
		item_current = item_n;
	} else {
		item_preview = item_current - 1;
		item_current --;
	}
	paging_current();
	$(item_html[item_preview]).appendTo(item_parent).addClass("preview").css("opacity",0);
}

//アイテムをスライドさせる
var item_slide_nxt = function () {
	$(item).animate({
		"left":"-30px",
		"opacity":"0"
	},500,function(){
		$(this).remove();
	});
	next_show();
	$(item + ".next").animate({
		"left":"0",
		"opacity":"1"
	},500);
};

var item_slide_prv = function() {
	$(item).animate({
		"left":"30px",
		"opacity":"0"
	},500,function(){
		$(this).remove();
	});
	preview_show();
	$(item + ".preview").animate({
		"left":"0",
		"opacity":"1"
	},500);
};

//指定の番号のアイテムを出力する
function num_show(i) {
	item_current = i * 1;
	$(item).animate({
		"opacity":"0"
	},500,function(){
		$(this).remove();
	});
	$(item_html[item_current]).appendTo(item_parent).css("opacity",0);
	$(item).animate({
		"opacity":"1"
	});
	paging_current();
}

//ページングの現在位置を設定する
function paging_current () {
	$("." + slide_paging + " > li").removeClass("current");
	$("." + slide_paging + " > li." + slide_paging + "_" + item_current).addClass("current");
}

//初期化
$(document).ready(function(){
	//左右ボタンを追加
	$(item_parent).append("<ul class='slide_navi cf'><li class='next'></li><li class='prev'></li></ul>");
	//ページングを追加
	// $(item_parent).append("<ul class='" + slide_paging + "'></ul>");

	//html要素を取得・配列化
	$(item).each(function(i){
		item_html[i] =  $(this).html();
		item_html[i] = '<div class="item">' + item_html[i] + '</div>';

		//ページングの番号もこのときに生成
		
		$("." + slide_paging).append("<li class='" + slide_paging + "_" + i + "'>" + "</li>");
		item_n ++;

		//ついでに各要素の高さを取得し、最大値をmax_heightに代入
		this_height = $(this).innerHeight();
		if(max_height < this_height){
			max_height = this_height;
		}
	});

	//ページングの現在位置を設定する
	paging_current();

	
	//スライドの1つ目以外を消去
	$(item).not(":first").remove();

	//クリックイベント
	$(".slide_navi > .next").click(item_slide_nxt);
	$(".slide_navi > .prev").click(item_slide_prv);

	$("." + slide_paging + " li").click(function(){
		siide_paging_click = $(this).attr("class").match(/[0-9+]/);
		siide_paging_click = String(siide_paging_click[0]);
		if(siide_paging_click != item_current){
			num_show(siide_paging_click);
		}
	});
});

###javascript（高さ取得）
高さを取得するためのjavascriptを書いたのですが、
これだとをクリックした時に表示されている
画像の高さを取得してしまいます。

$(window).load(function() {
	h = $('.slide .item').height();
	$(".slide").css("height", h + "px");
});

$(function(){
	function showHeight(elm, h) {
	   $(".slide").css("height", h + "px");
	}
	$(".next").on('click', function () { 
	   showHeight("item", $(".slide .item").height());
	});
	$(".prev").on('click', function () { 
	   showHeight("item", $(".slide .item").height());
	});
});

kei344

2017/01/05 12:35

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

行動規範の内容に同意します

回答1件

ベストアンサー

これで親要素を子要素と同じ高さにできていると思います。

修正

可読性と保守性を向上してみました。
まとめられる処理はまとめるようにし、変数名や関数名をわかりやすくしましょう。
バグが発見しやすくなり、後々の修正が楽になりますよ。

JavaScript
1$(function() {
2	//定数を定義
3	var animated_duration = 500; // milliseconds
4	var sliding_gap = 30; // px
5	var opacity_opaque = 1;
6	var opacity_transparent = 0;
7	var item_wrapper = ".slide";
8	var all_items = item_wrapper + " > .item";
9	//変数を定義
10	var last_item_index = -1;
11	var item_html = [];
12	var current_item_index = 0, max_height = 0;
13	//ページング関連の変数
14	var slide_paging = "slide_paging";
15	var slide_paging_click;
16
17	function append_item_to_wrapper(item_index) {
18		$(item_html[item_index]).appendTo(item_wrapper).css("opacity", opacity_transparent);
19	}
20
21	//指定の番号のアイテムを出力する
22	function show_indexed_item(index) {
23		current_item_index = index * 1;
24
25		$(all_items).animate({
26			"opacity" : opacity_transparent
27		}, animated_duration, function() {
28			$(this).remove();
29		});
30
31		paging_current();
32		append_item_to_wrapper(current_item_index);
33
34		$(all_items).animate({
35			"opacity" : opacity_opaque
36		}, animated_duration, function() {
37			set_wrapper_as_high_as($(this));
38		});
39	}
40
41	//次のアイテムをスライドさせる
42	function slide_item(is_previous) {
43		current_item_index += (is_previous ? -1 : 1);
44
45		if (current_item_index < 0) {
46			current_item_index = last_item_index;
47		} else if (current_item_index > last_item_index) {
48			current_item_index = 0;
49		}
50
51		$(all_items).animate({
52			"left" : sliding_gap * (is_previous ? 1 : -1) + "px",
53			"opacity" : opacity_transparent
54		}, animated_duration, function() {
55			$(this).remove();
56		});
57
58		paging_current();
59		append_item_to_wrapper(current_item_index);
60
61		$(all_items).animate({
62			"left" : "0",
63			"opacity" : opacity_opaque
64		}, animated_duration, function() {
65			set_wrapper_as_high_as($(this));
66		});
67	};
68
69	//親要素を子要素と同じ高さにする
70	function set_wrapper_as_high_as(child) {
71		var height = child.outerHeight();
72		child.parent().css('height', height);
73	};
74
75	//ページングの現在位置を設定する
76	function paging_current() {
77		$("." + slide_paging + " > li").removeClass("current");
78		$("." + slide_paging + " > li." + slide_paging + "_" + current_item_index).addClass("current");
79	}
80
81	//初期化
82	$(document).ready(function() {
83		//左右ボタンをHTMLで直接記述
84		//ページングを追加
85		// $(item_wrapper).append("<ul class='" + slide_paging + "'></ul>");
86
87		//html要素を取得・配列化
88		$(all_items).each(function(index) {
89			item_html[index] = '<div class="item">' + $(this).html() + '</div>';
90
91			//ページングの番号もこのときに生成
92			$("." + slide_paging).append("<li class='" + slide_paging + "_" + index + "'>" + "</li>");
93
94			last_item_index++;
95
96			//ついでに各要素の高さを取得し、最大値をmax_heightに代入
97			max_height = Math.max(max_height, $(this).innerHeight());
98		});
99
100		//ページングの現在位置を設定する
101		paging_current();
102		set_wrapper_as_high_as($(all_items + ":first"));
103
104		//スライドの1つ目以外を消去
105		$(all_items).not(":first").remove();
106
107		//クリックイベント
108		$(".slide_navi > .next").click(function() {
109			slide_item(false);
110		});
111
112		$(".slide_navi > .previous").click(function() {
113			slide_item(true);
114		});
115
116		$("." + slide_paging + " li").click(function() {
117			slide_paging_click = $(this).attr("class").match(/[0-9+]/);
118			slide_paging_click = String(slide_paging_click[0]);
119			if (slide_paging_click != current_item_index) {
120				show_indexed_item(slide_paging_click);
121			}
122		});
123	});
124});