回答編集履歴
3
IE対応
test
CHANGED
|
@@ -86,6 +86,36 @@
|
|
|
86
86
|
|
|
87
87
|
});
|
|
88
88
|
|
|
89
|
+
function getIndexs(ele){ //IE対応版
|
|
90
|
+
|
|
91
|
+
if(p=ele.parentNode){
|
|
92
|
+
|
|
93
|
+
var idxs=[];
|
|
94
|
+
|
|
95
|
+
if(eles=p.children){
|
|
96
|
+
|
|
97
|
+
for(var i=0;i<eles.leng
|
|
98
|
+
|
|
99
|
+
if(eles[i]==ele) brea
|
|
100
|
+
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
idxs=getIndexs(p).conca
|
|
104
|
+
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
return idxs;
|
|
108
|
+
|
|
109
|
+
}else{
|
|
110
|
+
|
|
111
|
+
return [0];
|
|
112
|
+
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/*
|
|
118
|
+
|
|
89
119
|
function getIndexs(ele){
|
|
90
120
|
|
|
91
121
|
if(ele.parentNode){
|
|
@@ -101,6 +131,8 @@
|
|
|
101
131
|
}
|
|
102
132
|
|
|
103
133
|
}
|
|
134
|
+
|
|
135
|
+
*/
|
|
104
136
|
|
|
105
137
|
function compArray(a1,a2){
|
|
106
138
|
|
2
chousei
test
CHANGED
|
@@ -70,11 +70,19 @@
|
|
|
70
70
|
|
|
71
71
|
var t=document.querySelector('.is-target');
|
|
72
72
|
|
|
73
|
+
var d=document.querySelector('#D');
|
|
74
|
+
|
|
75
|
+
var g=document.querySelector('#G');
|
|
76
|
+
|
|
73
77
|
console.log(compArray(getIndexs(c),getIndexs(a)));//#Cより#Aは前(-1)
|
|
74
78
|
|
|
75
79
|
console.log(compArray(getIndexs(c),getIndexs(t)));//#Cより.is-targetは後(1)
|
|
76
80
|
|
|
77
81
|
console.log(compArray(getIndexs(c),getIndexs(c)));//#Cと#Cは同じ
|
|
82
|
+
|
|
83
|
+
console.log(compArray(getIndexs(d),getIndexs(g)));//#Dは#Gを含む(2);
|
|
84
|
+
|
|
85
|
+
console.log(compArray(getIndexs(g),getIndexs(d)));//#Gは#Dに含まれる(-2);
|
|
78
86
|
|
|
79
87
|
});
|
|
80
88
|
|
|
@@ -98,13 +106,15 @@
|
|
|
98
106
|
|
|
99
107
|
for(var i in a1){
|
|
100
108
|
|
|
109
|
+
if(typeof a2[i]=="undefined") return 2;
|
|
110
|
+
|
|
101
111
|
if(a1[i]<a2[i]) return 1;
|
|
102
112
|
|
|
103
113
|
if(a1[i]>a2[i]) return -1;
|
|
104
114
|
|
|
105
115
|
};
|
|
106
116
|
|
|
107
|
-
return 0;
|
|
117
|
+
return a1.length==a2.length?0:-2;
|
|
108
118
|
|
|
109
119
|
}
|
|
110
120
|
|
|
@@ -120,7 +130,7 @@
|
|
|
120
130
|
|
|
121
131
|
<p id="C"></p>
|
|
122
132
|
|
|
123
|
-
<div>
|
|
133
|
+
<div id="G">
|
|
124
134
|
|
|
125
135
|
<p id="D"></p>
|
|
126
136
|
|
|
@@ -135,3 +145,5 @@
|
|
|
135
145
|
</body>
|
|
136
146
|
|
|
137
147
|
```
|
|
148
|
+
|
|
149
|
+
※親子関係のチェックが抜けていたので一部修正しました
|
1
調整
test
CHANGED
|
@@ -53,3 +53,85 @@
|
|
|
53
53
|
完全に相対値をとりたいなら、自分の親を再帰的に拾って
|
|
54
54
|
|
|
55
55
|
インデックスを拾っていく必要があります
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
# 追記
|
|
60
|
+
|
|
61
|
+
```javascript
|
|
62
|
+
|
|
63
|
+
<script>
|
|
64
|
+
|
|
65
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
|
66
|
+
|
|
67
|
+
var a=document.querySelector('#A');
|
|
68
|
+
|
|
69
|
+
var c=document.querySelector('#C');
|
|
70
|
+
|
|
71
|
+
var t=document.querySelector('.is-target');
|
|
72
|
+
|
|
73
|
+
console.log(compArray(getIndexs(c),getIndexs(a)));//#Cより#Aは前(-1)
|
|
74
|
+
|
|
75
|
+
console.log(compArray(getIndexs(c),getIndexs(t)));//#Cより.is-targetは後(1)
|
|
76
|
+
|
|
77
|
+
console.log(compArray(getIndexs(c),getIndexs(c)));//#Cと#Cは同じ
|
|
78
|
+
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
function getIndexs(ele){
|
|
82
|
+
|
|
83
|
+
if(ele.parentNode){
|
|
84
|
+
|
|
85
|
+
var idx=[].indexOf.call(ele.parentNode.children,ele);
|
|
86
|
+
|
|
87
|
+
return getIndexs(ele.parentNode).concat([idx]);
|
|
88
|
+
|
|
89
|
+
}else{
|
|
90
|
+
|
|
91
|
+
return [0];
|
|
92
|
+
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
function compArray(a1,a2){
|
|
98
|
+
|
|
99
|
+
for(var i in a1){
|
|
100
|
+
|
|
101
|
+
if(a1[i]<a2[i]) return 1;
|
|
102
|
+
|
|
103
|
+
if(a1[i]>a2[i]) return -1;
|
|
104
|
+
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
return 0;
|
|
108
|
+
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
</script>
|
|
112
|
+
|
|
113
|
+
<body>
|
|
114
|
+
|
|
115
|
+
<div>
|
|
116
|
+
|
|
117
|
+
<p id="A"></p>
|
|
118
|
+
|
|
119
|
+
<p id="B"></p>
|
|
120
|
+
|
|
121
|
+
<p id="C"></p>
|
|
122
|
+
|
|
123
|
+
<div>
|
|
124
|
+
|
|
125
|
+
<p id="D"></p>
|
|
126
|
+
|
|
127
|
+
<p id="E" class="is-target"></p>
|
|
128
|
+
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<p id="F"></p>
|
|
132
|
+
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
</body>
|
|
136
|
+
|
|
137
|
+
```
|