檢查javascript中的while循環中的元素類

Question

*這必須在JavaScript中完成，而不是在jQuery中完成。

我想要做的就是抓住h4標籤的innerText<a>與類btn-blue被點擊時。

我意識到，我可以這樣做：

element.parentElement.previousElementSibling.children[0].innerText; 

但我真的想要的東西更加靈活。

這是我到目前爲止，並且它在我在控制檯（chrome）中運行時工作，但是一旦我將它添加到站點，它就不會拉入h4標記的innerText 。

HTML

<div class="border-box clearfix"> 
    <div class="blah"> 
     <h4>h4 Title</h4> 
     <p>paragraph</p> 
    </div> 
    <div class="head clearfix"> 
     <h4>h4 Title</h4> 
     <p>paragraph</p> 
    </div> 
    <p class="float-right"> 
     <a href="/transactions/" class="btn-blue">anchor tag</a> 
    </p> 
</div> 

的JavaScript

var el = document.getElementsByClassName('head')[0]; 
    var parent = el.parentElement; 

    while(parent && parent !== document.body && parent.className && parent.className.indexOf('head'){ 
     parent = parent.previousElementSibling; 
    } 

    var children = parent.childNodes; 

     for(i=0; i < children.length; i++){ 
      var name = children[i].tagName; 
       if(name.toLowerCase() === 'h4'){ 
        var text = children[i].innerText || children[i].textContent; 
         return text; 
       } 
     } 

我相信這個問題是在while循環使用parent.className.indexOf('head')。我試圖確定的是，如果元素具有頭部類，並且從SO問題（javascript - Test if an element contains a class），我已經看到我可以執行indexOf來檢查頭部是否在課堂中。

我也讀過，我可以使用.classList.contains('head')，但不包括對早期IE瀏覽器的支持。

兩個問題：

1. 上午我在儘可能最好的方式獲得的<h4>標籤的innerText？ （這可能更適合codereview.stackoverflow.com）。

2. 測試一個元素在while循環中是否有類的最好方法是什麼？

SOLUTION：

我結束了使用@格雷格薄瑞光的解決方案僅僅是因爲它是最容易讓我調整和實施在谷歌代碼管理工具。最終的代碼如下所示：

function(){ 
    var element = {{gtm.element}}; 
    var elementClass = 'border-box'; 

    while(element && !((" " + element.className + " ").indexOf(" " + elementClass + " ") > -1)){ 
     element = element.parentNode; 
    } 

    return element.querySelector('h4').innerText || element.querySelector('h4').textContent; 
} 

Answer 1

這個怎麼樣？

function findHeaderText(element, className) { 
    while (element && !element.classList.contains(className)) { 
     element = element.parentNode; 
    } 

    var heading = element.querySelector("h1, h2, h3, h4, h5, h6"), 
     text = heading.innerHTML; 

    return text; 
} 


function handleClick(event) { 
    var text = findHeaderText(event.target, "border-box"); 

    alert(text); 
} 

的基本思想是在點擊事件的目標開始，然後步行文檔樹，直到找到包含某一類的元素。從那裏，使用querySelector方法獲取第一個標題，然後獲取其innerHTML或文本。

該函數可能會使用一些額外的錯誤處理，但我把它作爲一個練習。 :)

Answer 2

看看這段代碼。這可能看起來有點延長了，但是它完成了這項工作！

如果您需要說明，我會提供！

DEMO

HTML

<div class="border-box clearfix"> 
    <div class="blah"> 
     <h4>h4 Title</h4> 
     <p>paragraph</p> 
    </div> 
    <div class="head clearfix"> 
     <h4>h4 Title</h4> 
     <p>paragraph</p> 
    </div> 
    <p class="float-right"> 
     <a href="#" onclick='return false' class="btn-blue">anchor tag</a> 
    </p> 
</div> 


<div class="border-box clearfix"> 
    <div class="blah"> 
     <h4>h4 Title</h4> 
     <p>paragraph</p> 
    </div> 
    <div class="head clearfix"> 
     <h4>h4 Title2</h4> 
     <p>paragraph</p> 
    </div> 
    <p class="float-right"> 
     <a href="#" onclick='return false' class="btn-blue">anchor tag</a> 
    </p> 
</div> 

的Javascript

function attach_(element,listener,ev,tf){ 

    if(element.attachEvent) { 

     element.attachEvent("on"+listener,ev); 

     }else{ 

     element.addEventListener(listener,ev,tf); 

     } 

    } 

function getCls(clsNm){ 

    return clS = document.querySelectorAll ? document.querySelectorAll("."+clsNm) : document.getElementsByClassName(clsNm); 

    } 


function returnH4Text(el){ 

    wrapper = el.parentNode.parentNode; 

    divs = wrapper.getElementsByTagName('div'); 

    if(divs.length>0){ 

    for(var i=0;i<divs.length;i++){ 

     if(divs[i].className.match('head')){ 

      return h4Text = divs[i].getElementsByTagName('h4')[0].innerText ? divs[i].getElementsByTagName('h4')[0].innerText : divs[i].getElementsByTagName('h4')[0].textContent; 

      } 

     } 

    } 

    } 

var anchors = getCls('btn-blue'); 

if(anchors.length>0){ 

    for(var y=0;y<anchors.length;y++){ 

attach_(anchors[y],'mousedown',function(event){ 

    evt = event || window.event; 
    trg = evt.target || evt.srcElement; 

    alert(returnH4Text(trg)); 

    },false); 

    } 

} 

Answer 3

我喜歡用原型STYL即這種面向對象的風格更易於使用和理解。但不幸的是，在IE8之前，您無法將原型添加到Element。所以這個解決方案只支持IE8 +和其他瀏覽器。如果你想支持IE7，你可以嘗試改變它的功能風格。現在 http://jsfiddle.net/Wa629/

Element.prototype.getParentByClassName = function(className) { 
    if(!this.parentNode) 
     return null; 
    else if(this.parentNode.hasClass(className)) 
     return this.parentNode; 
    else 
     return this.parentNode.getParentByClassName(className); 
}; 

Element.prototype.hasClass = function(className) { 
    return (this.classList || this.className.split(' ')).contains(className); 
}; 

Element.prototype.text = function() { 
    return this.innerText || this.textContent; 
}; 

if(!Array.prototype.contains) 
{ 
    Array.prototype.contains = function(item) { 
     for(var i = 0;i < item.length;++i) 
      if(this[i] == item) 
       return true; 
     return false; 
    } 
} 

，你可以用以下方式獲得標題：

element.getParentByClassName('border-box').querySelector('.head h4').text()