重新加载后相同的功能不给出相同的结果答案

【问题标题】：Same function not giving same result after reload重新加载后相同的功能不给出相同的结果
【发布时间】：2019-01-12 00:49:45
【问题描述】：

所以基本上，我的页面是一个商店，所以内容是使用 php 短代码生成的，如下所示：

<?php get_header(); ?>
<div id="main-content">
    <div id="page-content">
        <?php
            echo do_shortcode('[products limit="20" columns="4" category="t-shirt"]');
        ?>
    </div>
</div>
<?php get_footer(); ?>
<script>$(document).ready(linebreak)</script>

所以它给了我一个像这样的基本页面，我的内容是一个元素列表：

<html>
<head></head>
<body>
<div id="main-content">
    <div id="page-content">
        <ul class="my-list">
          <li class="my-element">
             <img>
             <h2>A title</h2>
          </li>
          <li class="my-element">
             <img>
             <h2>A title</h2>
          </li>
        </ul>
    </div>
</div>
<footer></footer>
</body>
</html>
<script>$(document).ready(linebreak)</script>

实际上有20多里，但你可以看到我的页面是什么样子的。我正在使用 linebreak jquery 函数来检查我的 h2 标题是否有换行符，因为我不想要它。如果有换行符，它只是保留前 20 个字符并在末尾添加“...”。它工作得很好，除了一个或一个 h2 并不总是根据我的重新加载而改变。它们确实有换行符，但是当我多次重新加载页面时，有时该功能会更改它们，有时则不会。它只有一两个特定的 h2 并且总是相同的。为什么每次运行我的页面时我的函数都没有给出相同的结果？

如果有帮助，这是我的 script.js 中包含在标头中的函数：

function linebreak(){
    $("#main-content #page-content .woocommerce ul li h2").each(function(index){
        var lheight = Math.round(parseFloat($("#main-content #page-content ul li h2").css("line-height")));
        var title = $(this).text().trim().substring(0, 100).split("").slice(0, 21).join("") + "...";
        if ($(this).height() > lheight){
            $(this).html(title);
        }
    });
};

【问题讨论】：

这个each() 没有运行，因为你没有woocommerce 类的元素。
我其实有一个，只是为了简化代码把它忘了:)

标签： javascript php jquery function each

【解决方案1】：

你有你想要的形象吗？使用 CSS 来管理过长的标题会不会更方便？

如果标题太长，如果您为 h2 元素设置宽度，以下代码将自动添加省略号。

例如

h2 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

【讨论】：

感谢您的帮助！这太神奇了，我不知道 css 可以做到这一点！唯一的问题是它不适用于以百分比设置的宽度。我仍然可以用 jquery 将我的百分比转换为 px，所以没什么大不了的！
嗯，很有趣。如果没有看到您的代码示例，很难说会发生什么。

【解决方案2】：

你的脚本应该在文档的头部，所以你需要找到<?php get_header(); ?>的生成位置。通常是header.php

【讨论】：

我正在使用来调用我的脚本，为什么它还没有等待加载 dom 呢？
你试过了吗？因为 html 文档的呈现方式强加了这种方式。头部首先被解析和处理，然后是正文，如果你的脚本在正文的页脚部分，那么它只会在正文几乎渲染后才被调用，这对你的情况来说太晚了。

【解决方案3】：

你必须等待 dom 完全加载

$( document ).ready(function() {
    linebreak();
});

如果你的主题结构简单，也可以查看header.php或footer.php删除代码

【讨论】：

当我使用来调用我的脚本时，等待 dom 还不够吗？
你的h2标签被任何javascript加载了吗？您还可以调用 setTimeout(function () {},1000);等待更多。但这显然不是解脱。 @Yuniru
不，所有这些 li 及其内容都是由 php echo 生成的，这就是为什么我不明白为什么我的代码似乎没有等待 dom 准备好
jQuery 只是 Javascript，遇到 JavaScript 就会被执行。因为大多数 jQuery 代码要求文档准备好，但附加事件处理程序的代码肯定会在文档准备好之前执行（否则它将无法处理文档就绪事件）。请把jquery代码放在页脚和