javascript - jQuery 在 Wordpress 中不工作

Question

我在 js/custom.js 中创建了一个函数.基本上，它通过添加一类 articleAlign 来为我在 wordpress 中对齐帖子, 会在文章标题和下面的摘录之间插入内容以创建更大的间隙，只有在文章标题不超过一行时才需要这样做，因为对于占两行的标题，它会推送文章摘录下来。我希望一行的文章标题和下面的摘录之间有更大的间距，以便摘录的顶部全部对齐。

CSS

.articleAlign::after {
  display:block;
  height:55px;
  content:"";
}

jQuery

(function($) {
  function articleAlign() {
    titleLength = $('.entry-title').children('a').text().length;
    if(titleLength < 44) {
    $('.entry-title').addClass('articleAlign');
    }
  }
  articleAlign();
})(jQuery);

当然，这是我的 enqueue :

wp_enqueue_script('custom-js', get_template_directory_uri() . 
'/js/custom.js', array('jquery'), '1.0.0', true);

请注意，我正在传递 true对于 $in_footer所以脚本就在 </body> 之前标签。 (所有内容都在一行中，在 Wordpress functions.php 中，就在 js/functions.js 的排队下方。)

为什么我的类(class)没有被添加？

Answer 1

jQuery 的 text 是一只奇怪的鸭子:与 jQuery 的所有其他 getter 不同，它只返回集合中 first 条目的相关值，它返回一个连接的字符串所有 集合中的条目。因此，一个可能的问题是存在多个 .entry-title 并且您得到的文本比您预期的要多。

查看一个随机的 Wordpress 站点，我看到有两个 .entry-title 元素，而不是一个，每个元素都包含标题。所以 $(".entry-title").children("a").text() 在这种情况下会返回一个字符串，其中包含标题的两个副本。

如果这就是您的情况，您可以使用 .eq(0)或 .first()只得到第一个。另请注意，$(".entry-title").children("a") 只是简单地写成 $(".entry-title > a")。所以:

if ($(".entry-title > a").eq(0).text().length < 44) {

---

在您提出的评论中:

Should I loop my function for every article?

如果您希望将此应用到它们中的每一个，是:

(function($) {
    $(".entry-title").each(function() {
        var $this = $(this);
        if ($this.children("a").first().text().length < 44) {
            $this.addClass("articleAlign");
        }
    });
})(jQuery);