0

我不能在我的项目中使用 jQuery 库，所以我需要让这个小 jQuery 片段“纯”javscript

$(document).ready(function(){
$listHeight = $('ul#home-news-list').height();
$child = $('ul#home-news-list li:last-child');
while ($listHeight > 150) {
    $($child).remove();
    $listHeight = $('#home-news-inner ul').height();
    $child = $('ul#home-news-list li:last-child');
    console.log($listHeight);
    }
});

所以它基本上删除了最后一个列表项，直到列表高度小于 150。我的 javascript 技能不是那么好，所以这是我想出的代码，它TypeError: document.getElementById(...) is null在第一行给了我，所以我不知道其余的是否是什么都值得：

var listHeight = document.getElementById('home-news-list').offsetHeight();
var child = document.getElementById('home-news-list li:last-child');
while (listHeight > 150) {
    child.parentNode.removeChild(child);
    var listHeight = document.getElementById('home-news-list').offsetHeight();
    child = document.getElementById('home-news-list li:last-child');
}

你能告诉我我的代码有什么问题吗？

我在调用这个脚本<head></head>

4

3 回答 3

2

您的主要问题似乎是使用 getElementById，此方法调用不能与 JQuery 使用相同的参数，因此在 pur javascript 中变得更加冗长和冗长，offsetHeight 也是属性而不是方法：

var listHeight = document.getElementById('home-news-list').offsetHeight;
var parent = document.getElementById('home-news-list');
var child = parent.lastChild;
while (listHeight > 150) {
    child.parentNode.removeChild(child);
    listHeight = document.getElementById('home-news-list').offsetHeight;
    child = parent.lastChild;
}
于 2013-06-20T20:02:51.217 回答
1

如果你想使用像 jquery 这样的 css 选择器，那么你可以使用 javascript 的 querySelector 和 querySelectorAll 方法。

var listHeight = document.getElementById('home-news-list').offsetHeight();
var child = document.querySelector('home-news-list li:last-child');
while (listHeight > 150) {
    child.parentNode.removeChild(child);
    var listHeight = document.getElementById('home-news-list').offsetHeight();
    child = document.querySelector('home-news-list li:last-child');
}

这与您的代码相同，但querySelector替换时getElementByid不起作用。

于 2013-06-20T20:08:08.443 回答
1

首先，你的脚本<head>会在浏览器解析你的 DOM 之前立即执行；所以你应该将脚本放在页面底部，并确保脚本仅在 DOM 准备好时执行：

window.onload = 函数（）{
    ...
};

如果您将 offsetHeight() 更改为 offsetHeight （它是一个属性，而不是方法），第一行应该可以工作。剩下的，你需要深入研究 CSS 选择器和 DOM api 来弄清楚 jQuery 是如何做到的......

对不起，你不能使用 jQuery，DOM API 是一个可怕的怪物。

于 2013-06-20T20:13:22.210 回答