如何在不带库的Vanilla JavaScript中实现“ prevUntil”？

Question

我需要在Vanilla JavaScript中实现jQuery的prevUntil()方法的功能。

我在同一级别上有几个prevUntil()元素：

<div>

我正在尝试使用

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

事件查找onclick的event.target 直到]达到特定条件（例如，类名匹配），然后停止。

我该如何实现？

我需要在Vanilla JavaScript中实现jQuery的prevUntil（）方法的功能。我在同一级别上有几个

元素：

＆...

] >>

此答案先前是针对类似问题发表的previousSiblings。

有几种方法。

以下任何一项都可以解决问题。

here
FYI：jQuery代码库是观察A级Javascript的绝佳资源。

这里是一个非常出色的工具，可以非常简化地显示jQuery代码库。

// METHOD A (ARRAY.FILTER, STRING.INDEXOF)
var siblings = function(node, children) {
    siblingList = children.filter(function(val) {
        return [node].indexOf(val) != -1;
    });
    return siblingList;
}

// METHOD B (FOR LOOP, IF STATEMENT, ARRAY.PUSH)
var siblings = function(node, children) {
    var siblingList = [];
    for (var n = children.length - 1; n >= 0; n--) {
        if (children[n] != node) {
            siblingList.push(children[n]);
        }  
    }
    return siblingList;
}

// METHOD C (STRING.INDEXOF, ARRAY.SPLICE)
var siblings = function(node, children) {
   siblingList = children;
   index = siblingList.indexOf(node);
   if(index != -1) {
       siblingList.splice(index, 1);
   }
   return siblingList;
}

http://james.padolsey.com/jquery/使用previousSibling：

Example

与

    var className = "needle";
    var element = clickedElement;
    while(element.previousSibling && element.previousSibling.className != className) {
       element = element.previousSibling;
    }
    element.previousSibling; // the element or null

结合使用.children。然后将.parentNode转换为数组后，对其进行过滤：NodeList。

http://jsfiddle.net/pimvdb/DYSAm/

怎么样：

var div = document.getElementsByTagName('div')[0];
var siblings = [].slice.call(div.parentNode.children) // convert to array
                 .filter(function(v) { return v !== div }); // remove element itself
console.log(siblings);

不要告诉我这在IE8中不起作用...

HTML DOM中有一个previousSibling属性

这里有一些参考

while ( node = node.previousElementSibling ) {
    if ( ( ' ' + node.className + ' ' ).indexOf( 'foo' ) !== -1 ) {
        // found; do your thing
        break;
    }
}

只看http://reference.sitepoint.com/javascript/Node/previousSibling。

how jQuery does it

哪个使用while /循环函数cal dir（）。 prevUntil一直持续到

prevUntil: function( elem, i, until ) {
    return jQuery.dir( elem, "previousSibling", until );
},

与previousSibling元素相同。

until

您可以使用

dir: function( elem, dir, until ) {
    var matched = [],
        cur = elem[ dir ];

    while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
        if ( cur.nodeType === 1 ) {
            matched.push( cur );
        }
        cur = cur[dir];
    }
    return matched;
},

确定兄弟姐妹的索引是否小于目标元素的索引：

indexOf

祝你好运。>>

Answer 1

此答案先前是针对类似问题发表的previousSiblings。

Answer 2

http://james.padolsey.com/jquery/使用previousSibling：

Answer 3

与

    var className = "needle";
    var element = clickedElement;
    while(element.previousSibling && element.previousSibling.className != className) {
       element = element.previousSibling;
    }
    element.previousSibling; // the element or null

结合使用.children。然后将.parentNode转换为数组后，对其进行过滤：NodeList。

Answer 4

怎么样：

Answer 5

HTML DOM中有一个previousSibling属性

Answer 6

只看http://reference.sitepoint.com/javascript/Node/previousSibling。

Answer 7

您可以使用

dir: function( elem, dir, until ) {
    var matched = [],
        cur = elem[ dir ];

    while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
        if ( cur.nodeType === 1 ) {
            matched.push( cur );
        }
        cur = cur[dir];
    }
    return matched;
},

确定兄弟姐妹的索引是否小于目标元素的索引：