Question

我遇到了JavaScript中DOM结构的问题。

我有几个div元素与类.item

<div class="item">
  <p class="title">Lorem ipfsum</p>
  <p>...</p>
  <a class="bttn">Button</a>
</div>

那么，如何通过点击同一个.item上的bttn来获取.title的文本值？在JQ中它看起来像$(this).parent('.title')，但我怎么能在Vanilla JS中做到这一点？

Answer 1

请记住：jQuery只是JavaScript。它是一些方便的层，位于一些凌乱的部分的顶部。您可以使用.parentNode访问父节点。将其与querySelector相结合，您就可以找到解决方案。

＆＃13;

document.querySelector('.bttn').addEventListener('click', function() {
  console.log(this.parentNode.querySelector('.title'));
});

＆＃13;

<div class="item">
  <p class="title">Lorem ipfsum</p>
  <p>...</p>
  <a class="bttn">Button</a>
</div>

＆＃13;

Answer 2

从点击的按钮父级中，搜索.title元素以检索其文本，如下所示：

＆＃13;

document.querySelector('.bttn').addEventListener('click', function() {
  console.log(this.parentNode.querySelector('.title').innerText);
});

＆＃13;

<div class="item">
  <p class="title">Lorem ipfsum</p>
  <p>...</p>
  <a class="bttn">Button</a>
</div>

＆＃13;

Answer 3

因为你有几个带有类项的div，你需要在纯JS中翻译每个按钮的click事件处理程序以及我建议使用的相关逻辑：

Document.querySelectorAll('.bttn')
Array.prototype.forEach()
Element.closest()及其Polyfill是为了确保浏览器之间的兼容性。

另一种方法是使用：

Node.previousSibling：Node.previousSibling只读属性返回其父节点childNodes列表中指定节点之前的节点，如果指定节点是该列表中的第一个节点，则返回null。

＆＃13;

//
// closest Polifyll: from MDN
//
if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest = function (s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s), i, el = this;
        do {
            i = matches.length;
            while (--i >= 0 && matches.item(i) !== el) {
            };
        } while ((i < 0) && (el = el.parentElement));
        return el;
    };
}

function previousSiblingByClassName(ele, className) {
    var el = ele;
    while (el = el.previousSibling) {
        if (el.classList != undefined && el.classList.contains(className)) {
            return el;
        }
    };
    return el;
}

Array.prototype.forEach.call(document.querySelectorAll('.bttn'), function (ele, idx) {
    ele.addEventListener('click', function (e) {
        console.log('Using closest: ' + this.closest('.item').querySelector('.title').textContent);
        console.log('Using previousSibling: ' + previousSiblingByClassName(this, 'title').textContent);
    });
});

＆＃13;

<div class="item">
    <p class="title">Lorem ipfsum1</p>

    <p>...</p>
    <a class="bttn">Button</a>
</div>
<div class="item">
    <p class="title">Lorem ipfsum2</p>

    <p>...</p>
    <a class="bttn">Button</a>
</div>
<div class="item">
    <p class="title">Lorem ipfsum3</p>

    <p>...</p>
    <a class="bttn">Button</a>
</div>

＆＃13;

Answer 4

像这样：

this.parentNode.querySelector('.title');

如何在JS中获得相同级别的元素值？

4 个答案: