如何使用 getElementsByClassName 也获取父元素？答案

【问题标题】：How to get the parent element too with getElementByClassName?如何使用 getElementsByClassName 也获取父元素？
【发布时间】：2013-07-27 00:20:55
【问题描述】：

我当然有非常简单的问题，我为自己无法解决它而感到有些羞愧。

HTML：

<div>
    <ul class="test">
        <li>1</li>
    </ul>
    <ul class="test">
        <li>2</li>
    </ul>
</div>

JavaScript：

var tests = document.getElementsByClassName('test')[0].innerHTML;
alert(tests);

jsFiddle：

Try it

目前，结果显示我<li>1</li>。

这不是我想要的。我希望结果是<ul class="test"><li>1</li></ul>。

我尝试使用.parent()（我可以使用jQuery），但它给了我所有<ul> 标签，而我只想要第一个。我也知道我可以使用一些.split()，但这肯定不是建议的方式。

我认为问题可能来自.innerHTML，有一个函数可以让我恢复目标元素，而不仅仅是他的孩子？

【问题讨论】：

你为什么想要 HTML？你打算用 HTML 做什么？你最终想要做什么？

标签： javascript jquery innerhtml

【解决方案1】：

只需使用outerHTML 而不是innerHTML

var tests = document.getElementsByClassName('test')[0].outerHTML

Check Fiddle

你可以用 jQuery 做同样的事情。 $.each 遍历元素，然后使用 this 使其仅指向该元素而不是该类的所有元素

jQuery

var $tests = $('.test');

$tests.each(function() {
    console.log(this.outerHTML)
});

jQuery Fiddle

【讨论】：

这是非常基本的预期，很明显很抱歉。我会尽快接受您的答复。