与jquery closest（）等价的javascript是什么？

我有以下代码，它是用domapi而不是jquery编写的。我不知道为什么。它位于jquery表单验证的提交函数中。我需要更改“parentNode”部分，使其不是“parent”，而是“最近的”。我不擅长使用javascript。我试着将其转换为jquery，但未能成功。基本上，如果这是jquery，我需要将.parent（）更改为.closest（）

var-summary=”“；
$.each（元素，函数（）{
summary+=“
”+this.element.parentNode.getElementsByTagName（'label'）[0]。innerHTML.replace（“\*\”，“）+”
”；
});
摘要=摘要。替换（/\.+\\1/，“$1”）；
警报（摘要）；

这可以用javascript实现吗？或者，有没有一种简单的方法将其转换为jquery

更新：这里有一把小提琴来帮助解释我想要实现的目标。基本上，因为我在其中一个输入周围添加了一个“span”标记，“p”标记不再是父项。因此，parentNode再也找不到“p”标记了

更新2--以前的fiddle链接不正确。上面的链接是正确的

---

如何修改以查找

标记，而不管它是直系父母还是祖父母？

以下是最接近属性的javascript：

closest: function( selectors, context ) {
        var cur,
            i = 0,
            l = this.length,
            matched = [],
            pos = rneedsContext.test( selectors ) || typeof selectors !== "string" ?
                jQuery( selectors, context || this.context ) :
                0;

        for ( ; i < l; i++ ) {
            for ( cur = this[i]; cur && cur !== context; cur = cur.parentNode ) {
                // Always skip document fragments
                if ( cur.nodeType < 11 && (pos ?
                    pos.index(cur) > -1 :

                    // Don't pass non-elements to Sizzle
                    cur.nodeType === 1 &&
                        jQuery.find.matchesSelector(cur, selectors)) ) {

                    matched.push( cur );
                    break;
                }
            }
        }

最近：函数（选择器、上下文）{
var cur，
i=0，
l=这个长度，
匹配=[]，
pos=rneedsContext.test（选择器）| |选择器类型！==“字符串”？
jQuery（选择器，context | | this.context）：
0;
对于（；i-1：
//不要将非元素传递给Sizzle
cur.nodeType==1&&
jQuery.find.matchesSelector（cur，selector）））{
匹配。推（cur）；
打破
}
}
}

无论何时，当您试图弄清楚jQuery中完成了什么事情时，您总是可以查看jQuery源代码，并将其反向工程到您的场景中。虽然有时这不起作用，但按照您的问题措辞，这就是我的出发点

---

来源：

仔细阅读你的问题，我想你想要的是

var summary = "";
$(element).each(function (id, ele) {
    summary +=  "<li>" + $(ele).closest("label").html().replace("\<span\>*\<\/span\>","") + "</li>";
});

summary = summary.replace(/\<li\>.+\<\/li\>\1/, "$1");

var-summary=”“；
$（元素）。每个（函数（id，ele）{
summary+=“
”+$（ele）.closest（“label”）.html（）。替换（“\*\”，“）+”
”；
});
摘要=摘要。替换（/\.+\\1/，“$1”）；

但是我不确定你在用最后一行做什么。首先你把所有的标签元素添加为li元素，然后你删除了所有的li元素？但是我不是一个真正的RegExp profi，所以我可能会错过一些东西。

也许我有点晚；-）但是这里有一个简单的递归函数（用要分析的

父节点调用self）在普通的旧JS中：

function closest( e, classname ) {
    if( hasClass( e, classname ) ) {
        //We found it!
        return e;
    }
    //console.error(e.parentNode.nodeName);
    if(e.parentNode.nodeName != 'BODY') //Last possibility! There's no parent behind!
        return e.parentNode && closest( e.parentNode, classname );

    //Didn't found it?
    return null;
}

hasClass（）函数（相当于JQuery）取决于浏览器是否知道
classList
——就像现在的情况一样

但是，无论如何，它适用于旧浏览器和（所谓的）新浏览器：

var
    hasClass

;
if ( 'classList' in document.documentElement ) {
    hasClass = function( elem, c ) {
        return elem.classList.contains( c );
    };
}
else {
    hasClass = function( elem, c ) {
        return classReg( c ).test( elem.className );
    };
}

请注意，对于较旧的浏览器，我们使用
RegExp
进行字符串比较。

这是（还有，期票，最后的东西：-）：

就这样。

现在已经解释过了，如果有人使用整套“工具”，那么你当然必须以相反的方式对其进行编码（首先是
classReg（）
，然后是
hasClass
东西，最后是我们的
最近的（）

另外，如果您注意到了，您在这里获得了两个等价的JQuery工具（
closest（）
和
hasClass（）
），您可以在多种情况下使用它们，就像我使用它们几年一样，现在：

hasClass（elem，'my class to check'）//Hello from the future（2019）！现在，在现代浏览器（即，不是Internet Explorer）中，使用本机DOM API可以直接实现这一点：

因此，您可以将
jQuery（选择器）.closest
替换为
document.querySelector（选择器）.closest

类似地，您应该能够通过使用和使用消除代码中的其他
jQuery
函数，例如
.children（）

另见




（其他部分的链接位于此代码笔的底部）

“它是用javascript而不是jquery编写的”-这超出了我的矛盾修饰法/矛盾检测器的范围。抱歉，我使用了错误的术语。我知道jquery是javascript。我不确定你称之为parentNode和getElementsByTagName的部分是什么…XML？@Lindsay你要找的术语是原生DOM API。谢谢你Fabrico。有什么理由需要这样写吗是吗？@Lindsay好吧，我想你知道这个术语是指软件组件的公共操作、方法、类型、输入和输出。你说的是方法。是的，DOM API。谢谢。不幸的是，我不知道如何将其应用到我的场景中。听起来我需要请人帮我修改代码。你能把它们放在一起吗r a js fiddle？我还不清楚你想做什么。在fiddle中，警告框中返回的标签是“你是美国公民吗？”是不正确的，因为我将该问题的单选按钮包装在一个span标记中。因此，parentNode现在与所有其他问题不同。我需要一种编写代码的方法，这样输入是否包装就不重要了。哦，天哪。我链接到了错误的小提琴！我移动得太快了。叹气。这是正确的小提琴，所以哟你可以明白我在说什么：谢谢。我没有写原始代码，所以我很难理解为什么会有一些选择
var
    hasClass

;
if ( 'classList' in document.documentElement ) {
    hasClass = function( elem, c ) {
        return elem.classList.contains( c );
    };
}
else {
    hasClass = function( elem, c ) {
        return classReg( c ).test( elem.className );
    };
}

function classReg( className ) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}