![](/img/trans.png)
[英]Pagination in vanilla Javascript without any frameworks or libraries
[英]How to implement “prevUntil” in Vanilla JavaScript without libraries?
我需要在 Vanilla JavaScript 中實現 jQuery 的prevUntil()
方法的功能。
我在同一級別有幾個<div>
元素:
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
我正在嘗試使用onclick
事件來查找event.target
的previousSiblings
直到達到某個標准(例如,類名匹配)然后停止。
我如何實現這一目標?
此答案先前已在此處發布以回答類似問題。
有幾種方法可以做到。
以下任一方法都可以解決問題。
// 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/
使用 previousElementSibling 的示例:
var className = "needle";
var element = clickedElement;
while(element.previousElementSibling && element.previousElementSibling.className != className) {
element = element.previousElementSibling;
}
element.previousElementSibling; // 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);
這個怎么樣:
while ( node = node.previousElementSibling ) {
if ( ( ' ' + node.className + ' ' ).indexOf( 'foo' ) !== -1 ) {
// found; do your thing
break;
}
}
不要打擾告訴我這在 IE8 中不起作用......
HTML DOM 中有一個 previousSibling 屬性
這里有一些參考
http://reference.sitepoint.com/javascript/Node/previousSibling
prevUntil: function( elem, i, until ) {
return jQuery.dir( elem, "previousSibling", until );
},
它使用名為 dir() 的 while / 循環函數。 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;
},
您可以使用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);
祝你好運。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.