Question

我对jQuery很陌生，所以我不完全知道我在做什么...但至少我在努力。对不起，如果之前有人询问过。我一直在寻找一些有识之士的小时，却无法找到我需要的东西。或者我可能只是没有使用正确的关键字......无论如何。

我想将.float-fix的高度设置为与.float-height相同的高度。这样做的原因是让#wrapper完全覆盖其中的内容。但是，我需要针对多个.float-fix和.float-height执行此操作。我已将它们与名称属性区分开来，因此我可以将它们分开/匹配，因为我不希望我的.float-fix同时占据第一个.float-height的高度，只有.float-height他们捆绑在一起。

换句话说，我希望.float-fix[name=1]取.float-height[name=1]的高度，.float-fix[name=2]取.float-height[name=2]的高度。我还需要灵活处理更多的浮动包，而不仅仅是这两个，并且高度会随窗口大小而变化，因此设置一个固定的数字不会。

我提出的代码和上班的麻烦是：

var myNum =  $('.float-fix').attr('name');

$('.float-fix[name=' + myNum + ']').height(
    $('.float-height[name=' + this.name + ']').height()
);

我很感激你们提供的任何帮助。希望我说的不是太混乱......

以下是我所谈论的项目的所有编码，以便您可以更好地了解正在发生的事情：

＆＃13;

function fixFloat() {
	var fix2nd = float2nd($('#wrapper').width(), 2, 15);
	function float2nd(a, b, c) {
		return a / b - c
	}
		
	$('.float-2nd').width(fix2nd);
	
	var fix3rd = float3rd($('#wrapper').width(), 3, 13.33);
	function float3rd(a, b, c) {
		return a / b - c
	}
		
	$('.float-3rd').width(fix3rd);
	
	var fix4th = float4th($('#wrapper').width(), 4, 12.5);
	function float4th(a, b, c) {
		return a / b - c
	}
	
	$('.float-4th').width(fix4th);
}

$('.float-bun').each(function(i) {
	$(this).find('.float-height').attr('name', ++i);
	$(this).find('.float-fix').attr('name', ++i);
});

function bunHeight() {
	var myNum =  $('.float-fix').attr('name');
		
	$('.float-fix[name=' + myNum + ']').height(
		$('.float-height[name=' + this.name + ']').height()
	);
}

$(document).ready(fixFloat).ready(bunHeight);
$(window).resize(fixFloat).resize(bunHeight);

＆＃13;

#wrapper {
    margin: auto;
	width: 58%;
	min-width: 600px;
	max-width: 2500px;
	background-color: rgba(60,60,60,0.5);
}

.float-bun, .float-fix {margin: 0;}

.float-cont, .float-height {
	float: left;
	margin: 0;
}

.float {
	float: left;
	margin: 0 0 10px 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="wrapper">

    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur blandit ullamcorper. Vivamus ultrices leo eget erat eleifend, a consequat urna luctus. Aenean cursus auctor augue, maximus eleifend risus placerat eget.</div>
  
	<div class="float-bun">
		<div class="float-height" name="0">
			<div class="float-cont">
				<div class="float float-2nd" style="background: red;">float 1</div>
				<div class="float float-2nd" style="background: blue;">float 2</div>
			</div>
					
			<div class="float-cont">
				<div class="float float-3rd" style="background: red;">float 1</div>
				<div class="float float-3rd" style="background: green;">float 2</div>
				<div class="float float-3rd" style="background: blue;">float 3</div>
			</div>
		</div>
		<div class="float-fix" name="0"></div>
	</div>

	<div class="float-bun">
		<div class="float-height" name="0">
			<div class="float-cont">
				<div class="float float-4th" style="background: red;">float 1</div>
				<div class="float float-4th" style="background: green;">float 2</div>
				<div class="float float-4th" style="background: blue;">float 3</div>
				<div class="float float-4th" style="background: yellow;">float 4</div>
			</div>
		</div>
		<div class="float-fix" name="0"></div>
	</div>

</div>

＆＃13;

jQuery：如何匹配多组div的高度？

0 个答案: