获取被点击元素的同级元素可以使用纯JavaScript或没有指令的AngularJS来实现。下面是两种方法的详细说明:
document.querySelector
或document.getElementById
等方法选择元素。parentNode
属性获取被点击元素的父节点。childNodes
属性获取父节点的所有子节点,再通过遍历筛选出同级元素。示例代码如下:
document.addEventListener('click', function(event) {
var clickedElement = event.target; // 获取被点击的元素
var parentElement = clickedElement.parentNode; // 获取父节点
var siblings = Array.from(parentElement.childNodes).filter(function(node) {
return node.nodeType === 1 && node !== clickedElement; // 筛选出同级元素
});
console.log(siblings); // 输出同级元素数组
});
angular.element
函数获取被点击元素的父节点,再使用children
方法获取所有子元素,再通过遍历筛选出同级元素。示例代码如下:
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="getSiblings($event.target)">点击获取同级元素</button>
</div>
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.getSiblings = function(clickedElement) {
var parentElement = angular.element(clickedElement).parent(); // 获取父节点
var siblings = parentElement.children().filter(function() {
return this !== clickedElement; // 筛选出同级元素
});
console.log(siblings); // 输出同级元素数组
};
});
这两种方法都可以获取被点击元素的同级元素,并且不依赖于特定的云计算品牌商。
领取专属 10元无门槛券
手把手带您无忧上云