javascript - 如何使用 jQuery 检测一行中的最后一个元素？

Question

我这里有这个标记:

<p>
    <?= $d['contact'] ?> | <?= $d['address'] ?>
</p>
<p>
    T: <?= $d['phone'] ?> | 
    <a href="mailto:<?= $d['email'] ?>"><?= $d['email'] ?></a> | 
    <a href="http://<?= $d['website'] ?>" target="_blank"><?= $d['website'] ?></a>
</p>

因为它是响应式布局，我想删除 |分隔符，当它是一行中的最后一个元素时。那可能吗？我正在考虑将其包装在 <span></span> 中并在它是最后一个元素时调用它。

Answer 1

可以做到，如果你确定分隔符后面的内容是一个元素，然后检查分隔符和下一个元素的位置:

<p>
    <?= $d['contact'] ?><span class="seperator"> | </span><span><?= $d['address'] ?></span>
</p>
<p>
    T: <?= $d['phone'] ?><span class="seperator"> | </span>
    <a href="mailto:<?= $d['email'] ?>"><?= $d['email'] ?></a><span class="seperator"> | </span>
    <a href="http://<?= $d['website'] ?>" target="_blank"><?= $d['website'] ?></a>
</p>

$(function () {
    $(window).resize(function () {
        $(".seperator").each(function () {
            var t = $(this);
            // use visibility since it does not free the space
            t.css("visibility", (t.next().offset().top > t.offset().top) ? "hidden" : "visible");
        });
    }).resize();
});

编辑:t.next().offset() 必须检查 .length，否则控制台将显示最后一个元素的错误 Uncaught TypeError: Cannot read property 'top'未定义的(在最后一个元素之后没有.next())。所以代码应该是这样的:

$(function () {
        $(window).resize(function () {
            $(".seperator").each(function () {
                var t = $(this);
                var this_offset = t.offset().top;
                if (t.next().length) {
                  var next_offset = t.next().offset().top; 
                }
                // use visibility since it does not free the space
                t.css("visibility", (next_offset > this_offset) ? "hidden" : "visible");
            });
        }).resize();
    });