Question

更新＃1：以下是我所有代码的 jsfiddle 。

我有这样的结构：

<ul class="topStoriesTab">
    <li data-id="month" class="top_articles">
        <article class="text-center">
            <a href="#post_url" class="topStoriesTitle">Post Title</a>
            <br>
            <a href="#url_here" class="topStoriesAuthor">Author name</a>
            <br>
            <span class="middot text-center topStoriesMidDot">·</span>
        </article>
        ...
    </li>
    <li data-id="year" class="top_articles">
        <article class="text-center">
            <a href="#post_url" class="topStoriesTitle">Post Title</a>
            <br>
            <a href="#url_here" class="topStoriesAuthor">Author name</a>
            <br>
            <span class="middot text-center topStoriesMidDot">·</span>
        </article>
        ...
    </li>
</ul>

li中的每个ul都像一个标签面板。超出此ul我还有另一个ul li来控制此列表的li将出现。

现在我喜欢做的是设置height的{{1}}等于ul元素的总高度。

在我的代码中，我尝试了以下内容：

ul li article

最后，我在find中使用以下选择器尝试了以上所有方法，但仍然没有运气：

// $tabContent corresponds to the active li element inside the ul.topStoriesTab
$tabContent.find('article').each(
    function(i)
    {
        // Return 0
        console.log($(this).height());

        // Return 0, while in console the samve value is 64
        console.log($(this)[0].clientHeight)

        // Return 0, while in console the samve value is 64
        console.log($(this)[0].offsetHeight)
    }
);

那么，有没有办法获得这些元素的高度？

更新＃1：以下是我所有代码的 jsfiddle 。

正如您所看到的，列表下方的“Heading”元素正在li中，因为UL元素似乎没有高度。这就是我想要解决的问题。

Answer 1

这可以通过css和overflow属性来实现。

#wpf_top_articles-2 {overflow:hidden;}

Fiddle

Answer 2

如果您使用的是jquery，则可以使用$('selector').outerHeight()或$('selector').innerHeight()。

Answer 3

问题解决了。解决方案如下：

而不是我的jQuery插件中的代码：

function __updatePluginHeight($this, $tabContent)
{
    $total_height   =   0;

    $tabContent.find('article').each(
        function(i)
        {
            console.log($(this)[0].offsetHeight);
        }
    );
}

我已将代码修改为：

function __updatePluginHeight($this, $tabContent)
{
    console.log($tabContent.height());
}

非常感谢您的协助：）

如何使用JS / jQuery获取元素的高度？

3 个答案: