質問編集履歴
1
コード具体化を試みます
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,25 +5,34 @@
|
|
|
5
5
|
ヒートマップのような仕組みをjqueryで作成しており、スクロールして表示された要素すべてを取得したいと考えております。
|
|
6
6
|
そのため、id,class,tagName等で要素を限定することができません。
|
|
7
7
|
|
|
8
|
+
### 追記
|
|
9
|
+
ソースコード内に実行を試みたソースを追記しました。
|
|
10
|
+
|
|
11
|
+
|
|
8
|
-
###
|
|
12
|
+
### ソースコード
|
|
9
13
|
```jquery
|
|
14
|
+
$(window).on('resize load scroll', function(){
|
|
10
|
-
var win_scr = $(window).scrollTop();
|
|
15
|
+
var win_scr = $(window).scrollTop();
|
|
11
|
-
var win_h = $(window).height();
|
|
16
|
+
var win_h = $(window).height();
|
|
12
|
-
var
|
|
17
|
+
var elem = $('body').find('*'); //すべての要素が取得できることを確認
|
|
13
|
-
var
|
|
18
|
+
var elem_pos = elem.offset().top; //body内最初の子要素のoffsetTopを取得する .....課題1
|
|
14
19
|
|
|
15
|
-
//scrollで画面内の判定
|
|
20
|
+
//scrollで画面内の判定
|
|
16
|
-
if(elem_pos - win_h > win_scr) {
|
|
21
|
+
if(elem_pos - win_h > win_scr && elem_pos < win_h) { //elemが画面内に入ったとき、elem_posが画面の高さより小さいとき
|
|
17
|
-
|
|
22
|
+
//課題：このときのelem_posが取れないので判定ができず下記が実行されない
|
|
23
|
+
elem.each(function() { //elemに対して
|
|
24
|
+
var t = $(this); //win_h内に入った要素をthisに入れる .....課題2
|
|
25
|
+
t_tag = t[0].tagName; //DOMにしてtag名を取得
|
|
26
|
+
console.log(t_tag); //tag名を表示
|
|
27
|
+
}
|
|
28
|
+
}
|
|
18
29
|
}
|
|
19
|
-
```
|
|
20
30
|
|
|
21
|
-
### 試したこと
|
|
22
31
|
```
|
|
23
|
-
//すべての要素
|
|
24
|
-
$('body').find('*'); //全部のタグは取れたが、、
|
|
25
32
|
|
|
26
|
-
|
|
33
|
+
### 課題
|
|
34
|
+
課題１：elem_posを条件式に使いたいが、ここで取れるのはbodyの最初の要素だけ。
|
|
35
|
+
課題2:$(this)がwin_h内に入った要素を取得できていない
|
|
27
36
|
|
|
28
37
|
|
|
29
|
-
拙い説明ですが、
|
|
38
|
+
拙い説明ですが、よろしくお願いいたします。
|