如何在每个中捕获div高度并在每个中设置?

时间:2015-10-26 12:38:07

标签: javascript jquery html css html5

我有一个简单的标记示例,如下所示:

<div class="question-child">question 1</div>
<div class="question-child">question 2</div>
<div class="question-child">question 3</div>
<div class="question-child">question 4</div>

<div class="answer-child">answer 1</div>
<div class="answer-child">answer 2</div>
<div class="answer-child">answer 3</div>
<div class="answer-child">answer 4</div>

所以,这个divs是关于php的 我需要divs:answer-child具有相同的divs:question-child高度。因为divs:question-child根据您的内容更改高度。 (如桌子排)

我尝试使用$().each,但我不知道我是否采取了正确的方式 可以帮帮我吗?

=== UPDATE ===
在@Florin Pop的帮助下,正如我所说,我们设法完成了每个人的扫描。但现在我还有另外一个问题 - 以前在这里提到过。
如您所见herediv:all涉及所有问题和答案,并重复相同的内容。最大的问题是头衔。它们的高度也不同,就像我之前提出的问题中的div一样 如何使divs:old-title的大小与divs:current-title的大小相同?

enter image description here

1 个答案:

答案 0 :(得分:3)

是的,您可以使用.each方法。我在考虑这样的事情:

$(".answer-child").each(function(e){
    $(this).css("height", $(".question-child").eq(e).css("height"));
});

我还创建了一个jsfiddle here

<强>更新 基于评论中的OP问题。这个html结构的答案:

<div class="question-child">question 1</div>
<div class="question-child">question 2</div>
<div class="question-child">question 3</div>
<div class="question-child">question 4</div>

<div class="answer-parent">
    <div class="answer-child">answer 1</div>
    <div class="answer-child">answer 2</div>
    <div class="answer-child">answer 3</div>
    <div class="answer-child">answer 4</div>
</div>

<div class="answer-parent">
    <div class="answer-child">answer 1</div>
    <div class="answer-child">answer 2</div>
    <div class="answer-child">answer 3</div>
    <div class="answer-child">answer 4</div>
</div>

<div class="answer-parent">
    <div class="answer-child">answer 1</div>
    <div class="answer-child">answer 2</div>
    <div class="answer-child">answer 3</div>
    <div class="answer-child">answer 4</div>
</div>

是这个jQuery代码:

$(".question-child").each(function(e){
    var that = $(this);
    $(".answer-parent").each(function(){
        $(this).children(".answer-child").eq(e).css("height", that.css("height"));
    });
});

jsfiddle

更新2:

对于标题问题,请将此代码添加到您现有的jQuery代码中:

var title_height = $(".current-title").eq(0).css("height");
$(".old-title").css("height", title_height);

jsfiddle为标题问题here