javascript - 如何使用 getElementByClassName 也获取父元素？

Question

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

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：

试试看

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

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

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

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

score 3 · Accepted Answer

只需使用outerHTML 而不是innerHTML

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

你可以用 jQuery 做同样的事情。$.each迭代元素然后使用this它只指向那个元素而不是那个类的所有元素

jQuery

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

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

1 回答 1