如何在JS中獲得相同級別的元素值？

我在JavaScript中遇到了DOM結構的問題。如何在JS中獲得相同級別的元素值？

我有類.item

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

所以，一些div元素，我怎樣才能通過點擊BTTN在同一.item得到.title僞的文本值？在JQ中，它看起來像這個$(this).parent('.title')，但我怎麼能在Vanilla JS中做到這一點？

來源

2017-04-26 Mark Bg

類的項目，你需要翻譯純JS的c每個按鈕和相關的邏輯，我建議用舔事件處理程序：

Document.querySelectorAll('.bttn')
Array.prototype.forEach()
Element.closest()及其填充工具，以確保瀏覽器之間的兼容性。

另一種方法是使用：

Node.previousSibling：本Node.previousSibling只讀屬性返回的節點立即在其父節點的childNodes列表中指定一個之前，或NULL，如果指定的節點是首先在該列表中。

// 
 
// 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); 
 
    }); 
 
});

<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>

來源

2017-04-26 14:14:16 gaetanoM

像這樣：

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

來源

2017-04-26 13:57:19 Artless

記住：jQuery是剛剛的JavaScript。它是一些凌亂部分頂部的便利層。您可以使用.parentNode訪問節點父節點。把它與querySelector結合起來，你就有了一個解決方案。

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

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

來源

2017-04-26 13:57:47

從點擊的按鈕父，搜索.title元素檢索如下的文字：因爲你有幾個的div

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

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

來源

2017-04-26 14:05:52 MaxZoom

如何在JS中獲得相同級別的元素值？

回答

相關問題