3

我有一个充满 DOM 元素的网页，我想从该页面中取出所有 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

您也许可以使用 nth-child；IE

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 回答
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

不幸的是，你无法避免使用 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 回答