3

DOM 要素でいっぱいの Web ページがあり、そのページからすべての h3 を取り出して、ページの上部に並べてインラインで表示したいと考えています。問題は - それは可能ですか?

<h3>I want</h3>
    There are tons of other content between them so...
<h3>These headers</h3>
    Keep in mind the're separated by many DOM elements...
<h3>To be displayed</h3>
    Luckily no other h3s between them...
<h3>Inline next to</h3>
    Thank you for trying to help :)
<h3>Each other </h3>

これは、絶対配置を使用しようとしたjsfiddleですが、この方法を取るのは難しいと確信しています(マージン):

http://jsfiddle.net/zLbuP/

少なくとも IE7以降ではコードが機能する必要があり、JS /jQuery を使用することはできません(ただし、jQuery を使用するのはかなり簡単です)。もちろんhtml自体も編集できません。

アイデアはありますか、それとも不可能ですか？;)

4

3 に答える 3

0

残念ながら、JS の使用を避けることはできません。すべてのh3タグを絶対位置に設定して上部に配置できますが、マージンを設定するには JQuery を使用する必要があります。h3前の兄弟の幅に基づいて、各タグのマージンを動的に設定する小さなスクリプトを作成しました。

var margin = 0;
$("#TryMe h3").each(function () {
    margin += $(this).prev().width();
    $(this).css("margin-left", margin + "px")
    margin += 20;
});

ここで実際の例を見ることができます: http://jsfiddle.net/VezCA/2/

于 2013-02-04T15:36:24.633 に答える
0

これは jQuery/Javascript で行うのは非常に簡単ですか?

私はちょっといじって、これを思いつきました: http://jsfiddle.net/zLbuP/19/

このコードは、すべての H3 からコンテンツを取得し、それらを削除して、結合された新しい H3 を作成するだけです。

//When then DOM is ready
jQuery(document).ready(function($) {
    //Cache the content of the headings to a variable so it may be removed before creating a new H3
    //this allows us to select the new H3 without having to use more complex selectors
    var h3text = $('#WhatIHaveNow h3').text();
    // remove the old H3's now that we have their content
    $('#WhatIHaveNow h3').remove();
    // create a new, empty H3 at the top of the parent div
    $('#WhatIHaveNow').prepend("<h3></h3>");
    //insert our cached content
    $('#WhatIHaveNow h3').text(h3text);

});
于 2013-02-04T10:34:37.357 に答える
0

nth-child を使用できる場合があります。すなわち

h3 { position:absolute; left: 0px; top: 0px; }
h3:nth-child(1) { margin-top: 15px; } 
h3:nth-child(2) { margin-top: 30px; }

ただし、IE7 は nth-child をサポートしていません。思い通りに動作させることができたとしても、かなりハックです。他の人が言ったように、jQuery またはプレーンな JS で行うのは簡単です。

于 2013-02-04T18:33:39.977 に答える