Question

我有以下代码，它是用DOM API而不是jquery编写的。我不确定为什么。它在jquery表单验证的提交函数中。我需要更改＆＃34; parentNode＆＃34;部分是为了代替＆＃34; parent＆＃34;它是最近的。＆＃34;我对javascript不好。我试着把它转换为jquery，但是无法让它工作。基本上，如果这是jquery，我需要将.parent（）更改为.closest（）。

var summary = "";

$.each(element, function() { 
summary += "<li>" + this.element.parentNode.getElementsByTagName('label')[0].innerHTML.replace("\<span\>*\<\/span\>","") + "</li>"; 
});

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

alert(summary);

这可能与javascript有关吗？或者，有没有一种简单的方法将其转换为jquery？

更新：这是帮助解释我想要完成的内容的小提琴。基本上，因为我添加了一个＆＃39; span＆＃39;围绕其中一个输入标记，＆＃39; p＆＃39;标签不再是父母。因此，parentNode没有找到＆＃39; p＆＃39;标签了。

http://jsfiddle.net/9um8xt79/1/

更新2 - 之前的小提琴链接不正确。上面的链接是正确的。

我如何修改以查找<p>标记，无论是直接父级还是祖父级？

Answer 1

这里是.closest属性的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;
                }
            }
        }

每当你试图找出在jQuery中完成的事情时，你总是可以只看一下jQuery源代码并对它进行反向工程。虽然有时候这会不会奏效，但问题就是这样，这就是我开始的地方。

来源：http://code.jquery.com/jquery-2.1.1.js

Answer 2

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

这样的东西

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

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

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

Answer 3

也许我有点晚了;-)但是这里有一个简单的递归函数（用parentNode称之为自我分析）在普通的旧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 hasClass()）取决于知道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进行字符串比较这是（和，promisse，最后的东西:-)）：

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

就是这样现在它解释了，如果有人使用完整的＆＃34;工具＆＃34;，当然你必须以相反的方式编码（第一classReg()，然后是hasClass的东西最后我们的closest()女王）。

此外，如果您注意到，您可以在这里获得2个等效的JQuery 工具（closest()和hasClass()），您可以在多种情况下使用它们 - 因为我将它们用于多个几年，现在：
hasClass( elem, 'my-class-to-check' ) //<= returns true || false
closest( elem, 'my-class-to-look-up' ) //<= returns the look-up obj || null

Answer 4

您好，未来（2019年）！现在，可以在现代浏览器（即不是Internet Explorer）中通过本机DOM API直接实现： Element.closest

因此您可以将jQuery(selector).closest替换为document.querySelector(selector).closest。

同样，您应该能够使用native .children和.classList.add()来消除代码中的其他jQuery函数，例如.children()和.addClass()。 / p>

另请参见

YouMightNotNeedJquery.com
"Native Equivalents of JQuery Methods - Part 1: Selecting DOM Elements" （其他部分的链接在此Codepen的底部）
"Native JavaScript Equivalents of jQuery Methods: the DOM and Forms"

相当于jquery nearest（）的javascript是什么？

4 个答案: