在javascript中检查while循环中的元素中的类 [英] Check for class in element in while loop in javascript

问题描述

*这必须在javascript中完成，而不是jQuery。

*This has to be done in javascript, not jQuery.

我要做的是抓住 innerText < a> 的 h4 标记的c $ c>，类 btn-点击了蓝色。

What I'm trying to do is grab the innerText of the h4 tag when <a> with the class btn-blue is clicked.

我意识到我能做到：

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

但我真的想要更灵活的东西。

but I'm really wanting something more flexible.

这是我到目前为止所做的，当它在控制台（chrome）中运行时它确实有效，但是一旦我将它添加到站点，它就不会拉入h4标签的innerText 。

This is what I have so far, and it does work when I run it in the console (chrome), but as soon as I add it to the site, it doesn't pull in the innerText of the h4 tag.

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

I相信问题是在while循环中使用 parent.className.indexOf（'head'）。我要确定的是元素是否具有类的头部，以及SO问题（ javascript - 测试一个元素是否包含一个类），我见过我可以做indexOf到ch eck并查看head是否属于班级。

I believe the issue is with using parent.className.indexOf('head') in the while loop. What I'm trying to determine is if the element has the class of head, and from the SO questions (javascript - Test if an element contains a class), I've seen I can do indexOf to check and see if head is within the class.

我还读过我可以使用 .classList.contains（'head'），但不包括对早期IE浏览器的支持。

I've also read that I can use .classList.contains('head'), but that doesn't include support for earlier IE browsers.

两个问题：

1. 我收到< h4> 标签的 innerText 了以最好的方式？ （这可能更适合codereview.stackoverflow.com）。

1. Am I getting the innerText of the <h4> tag in the best possible way? (this could be better suited for codereview.stackoverflow.com).

测试元素在while循环中是否有类的最佳方法是什么？ / p>

What the best way to test if a element has a class within a while loop?

解决方案：

我最终只使用了@Greg Burghardt的解决方案，因为我最容易调整并实现在Google跟踪代码管理器中使用。最终代码如下所示：

I ended up using @Greg Burghardt 's solution solely because it was the easiest for me to tweak and implement for use in Google Tag Manager. The final code looked like this:

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

推荐答案

这个怎么样？

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或文本。

The basic idea is to start at the target of the click event, and walk up the document tree until you find an element containing a certain class. From there, use the querySelector method to grab the first heading, then grab its innerHTML or text.

该函数可能会使用一些额外的错误处理，但我把它作为练习留给你。 ：）

The function could probably use some additional error handling, but I leave that as an exercise for you. :)

这篇关于在javascript中检查while循环中的元素中的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！