javascript - 带有标题的html多列无序列表

Question

我有一个无序列表，根据我的样式表，它有 1、2 或 3 列。我想为列表创建一个标题，它也应该响应屏幕大小，所以如果我有 2 列列表，我应该看到 2 个标题与列表对齐，或者如果我有 3 列则为 3 个。元素列表是动态的，因此可以列出任意数量的元素。例子 http://jsfiddle.net/francoist/AtX4K/1/

注意:下图中的 Log No Dimension(标题)是我要添加的内容。

结果

CSS

    body{
     font-family: "Tahoma";
    }

    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

li{
    position: relative;
    border-bottom: 1px dotted #ccc;
    list-style: none;
    list-style-type: none;
    width: 100%;
    padding: 0;
}

ul li a {
    float: right; /* width of icon + whitespace */
    padding: 5px;
    font-size: 14px;
}

labeltotal{
    float: right;
    font-size: 24px;
}

labeldetail{
    font-size: 24px;
}
labeldetailsmall{
    font-size: 14px;
}
@media  (min-width:  480px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}
@media (min-width:  568px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}
@media  (min-width:  768px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}

HTML

<ul>
<li>
<labeldetailsmall>LOG000001 </labeldetailsmall><labeldetail>2,1 x2,3</labeldetail>        
<a href="#" onclick="alert('Hello World')">edit</a>
<a href="#" onclick="alert('Hello World')">delete</a>
</li>
<li>
<labeldetailsmall>LOG000002 </labeldetailsmall><labeldetail>2,1 x 2,3</labeldetail>
<a href="#" onclick="alert('Hello World')">edit</a>
<a href="#" onclick="alert('Hello World')">delete</a>
</li>
<li>
</ul>

Answer 1

我不建议您使用此功能，因为它充斥着不当的编程习惯，而且效率可能不高。

它在第一页加载时工作正常，但在窗口调整大小时，它变得“有点”忙乱。但是，今天我想挑战自己，我接受了。

这个函数基本上做的是它获取指定 HTML 标记(在本例中为 labeldetailsmall)所有出现的坐标，选择最接近顶部的元素并向每个 while 附加一个标题删除之前插入的标题元素。

CSS 是模糊的，需要改进(因为元素有一些重叠)。

再一次，使用它需要您自担风险......我只是想玩代码，结果就这样了。

我只是希望您能了解一种可以用来实现您想要的目标的想法。

---

[更新]

jQuery:

function addThoseHeadings(elementTagInput, yourHEADING){ 

    var elementTag = $( elementTagInput );

    var allElementsObject = {positions : {}};

    $(elementTag).each(function( index ) {
        var theOffset = $(this).offset();
        allElementsObject.positions[index] = {
            left: theOffset.left,
            top: theOffset.top
        };
    });

    var arr = Object.keys( allElementsObject ).map(function ( key, subkey ) { return allElementsObject[key][subkey]['top']; });
    var minimumOffset = Math.min.apply( null, arr );

    $.each(allElementsObject.positions, function( indexUnwanted, valueOffsets ) {
        if( valueOffsets.top == minimumOffset ){
            var elementToAppendTo = document.elementFromPoint( valueOffsets.left, valueOffsets.top );
            $( elementToAppendTo ).before( '<span class="replaceThese" style="left:'+(valueOffsets.left)+'px;top:'+(valueOffsets.top-35)+'px;">'+yourHEADING+'</span>' );
        }
    });

}

var yourHEADING = "Log No";

addThoseHeadings( "labeldetailsmall", yourHEADING );

$(window).resize(function() {
    $( ".replaceThese" ).remove();
    addThoseHeadings( "labeldetailsmall", yourHEADING );
});

---

CSS(需要改进):

span {
    display: inline-block;
    position: fixed;
}

我希望这对某些人有一些用处!