12

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

我<div>在同一级别上有几个元素：

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

我正在尝试使用onclick事件来查找event.target's previousSiblings ，直到达到某个条件（例如，类名匹配）然后停止。

我如何实现这一目标？

4

7 回答 7

13

该答案先前已在此处发布，以回答类似的问题。

有几种方法可以做到这一点。

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

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

仅供参考：jQuery 代码库是观察 A 级 Javascript 的绝佳资源。

这是一个出色的工具，它以非常精简的方式展示了 jQuery 代码库。 http://james.padolsey.com/jquery/

于 2014-04-02T00:11:04.203 回答
8

使用 previousElementSibling 的示例：

    var className = "needle";
    var element = clickedElement;
    while(element.previousElementSibling && element.previousElementSibling.className != className) {
       element = element.previousElementSibling;
    }
    element.previousElementSibling; // the element or null
于 2011-09-08T20:45:23.317 回答
6

.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);
于 2011-09-08T20:43:44.993 回答
3

这个怎么样：

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

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

于 2011-09-08T20:46:04.487 回答
2

HTML DOM 中有一个 previousSibling 属性

这里有一些参考

http://reference.sitepoint.com/javascript/Node/previousSibling

于 2011-09-08T20:40:52.980 回答
2

看看jQuery 是如何做到的。

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

它使用了一个 while / 循环函数，称为 dir()。prevUntil 一直持续到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;
},
于 2011-09-08T20:42:32.840 回答
1

您可以使用indexOf来确定兄弟姐妹的索引是否小于目标元素的索引：

// jshint esversion: 9

// get the target node
const node = document.querySelector("div:nth-child(3)");

// get the target node's index
const node_index = node.parentNode.indexOf(node);

// get the siblings of the target node
const siblings = node => [...node.parentNode.children].filter(child => 
  child !== node
);
console.log(siblings);

// get the prevUntil
const class_name = "\bmy_class\b";
const prevUntil = siblings.filter((sibling, i) =>
  i < node_index && (sibling.getAttribute("class") || "").includes(class_name)
);
console.log(prevUntil);

祝你好运。

于 2019-10-21T14:53:32.867 回答