Question

我想使用Javascript或jQuery获取帖子正文的第一个<ul>元素并显示它。在Blogger上，标记<data:post.body/>显示整个帖子。

<div class="post-cover">
    <img src="BIG-IMAGE"/>
</div>

<ul>
   <li>CONTENT 1</li>
   <li>CONTENT 2</li>
   <li>CONTENT 3</li>
   <li>CONTENT 4</li>
</ul>

原因是：我需要在主页中显示这些ul元素，但我无法加载原始图像，因为它们都很大并且会显着影响加载时间。

我也不能将display: none用于图像，因为它以相同的方式加载。我正在使用Blogger。

我认为在获取缩略图（第一个src）或第一个字符串（用于摘要）时类似，但我不知道如何制作它。

Answer 1

UPDATE ul：首先获取页面上的第一个ul元素。

  $("ul:first").css(//whatever you want to do);

您可以使用$("ul:first")获取ul并使用任何jquery函数来处理该元素。

Answer 2

正如帖子标题所说 - 从div中获取第一个元素（并使用jQuery显示它）：

$( ".post-cover ul" ).first().show();

预加载图像，您可能正在尝试实际执行此操作：

$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}
$.preloadImages("BIG-IMAGE.jpg");

Answer 3

获取div的第一个元素

在您的情况下，这是img但不是ul代码。

如果你真的想要获得第一个元素，你可以这样做：

$(".post-cover").children().first().css({ // ... });

jQuery children（）接受DOM中的所有子项 jQuery first（）接受第一个

但是，如果您知道要采用哪个元素，最好给他一个名称并使用名称访问它：

// HTML
<div class="post-cover">
   <img src="BIG-IMAGE" id="post-cover-image"/>
</div>

// JS 
$("#post-cover-image").css({ // ... });

Answer 4

首先，您需要找到div的图像元素，如下所示：

var div_post_cover = document.getElementsByClassName("post-cover")[0];

注意：[0]适用于第一个具有后封面

类的DIV

然后你需要得到DIV中的第一个元素，代码是这样的：

var img_first = div_post_cover.children[0];

或

var img_first = div_post_cover.getElementsByTagName("img")[0];

然后你将获得src的值

var img_first_src = img_first.src;

这将是汇总代码。

var img_src = document.getElementsByClassName("post-cover")[0].children[0].src;

如果有效，你需要尝试这个。

<script type="text/javascript">
        window.onload = (function(){
            //document.getElementsByClassName("post-cover")[0].children[0].src
            alert(document.getElementsByClassName("post-cover")[0].children[0].src);
        });
    </script>

Answer 5

您可以使用show()和hide()：

$( ".post-cover ul:first" ).hide();
$( ".post-cover ul:first" ).show();

从帖子正文中获取第一个<ul>元素

5 个答案: