0

こんにちは、ウェブサイトの上にあり、特定の要素の深さをユーザーに示すことができる JS アプリの皆さん、特定の場所でマウスの下にある div の数を計算するにはどうすればよいですか?

ありがとう

更新 質問への回答:

  • jQuery または別のライブラリで問題ありません。
  • マウス トラッキング コードは既にありますが、まだ開始していません。
4

3 に答える 3

0

document.getElementFromPoint 関数を使用して解決策を見つけました。getElementFromPoint にはクロスブラウザーの問題があるため、http://www.zehnet.de/2010/11/19/document-elementfrompoint-a-jquery-solution/のコードを採用しました。理想的には、そのコードをプラグインとして使用することができますが、彼がプラグインをセットアップした方法で何かが壊れています. ただし、彼のクロスブラウザー ソリューションの基本はしっかりしています。サブ要素の親を計算する基本要素の mousemove イベント ハンドラーを作成し、次のように getElementFromPoint メソッドを使用します。

// if the browser doesn't support getElementFromPoint, you'll need another solution 
if (typeof(document.getElementFromPoint) != 'undefined') {
    // variables to save the checked and relative status
    var check = false;
    var isRelative = true;
    $(document).mousemove(function (e) {
        // get the viewport mouse position
        var x = e.clientX;
        var y = e.clientY;

        // if we haven't checked already, check whether or not the browser users
        // viewport or page coordinates for the elementFromPoint function
        if(!check) {
            var sl;
            if((sl = $(document).scrollTop()) > 0) {
                isRelative = (document.elementFromPoint(0, sl + $(window).height() -1) == null);
            }
            else if((sl = $(document).scrollLeft()) > 0) {
                isRelative = (document.elementFromPoint(sl + $(window).width() -1, 0) == null);
            }
            check = (sl > 0);
        }

        // if the browser uses page coordinates, add in the scroll offset
        if(!isRelative) {
            x += $(document).scrollLeft();
            y += $(document).scrollTop();
        }

        // get the element at the mouse coordinates
        var element = document.elementFromPoint(x,y);

        // get number of parent elements
        var numParents = $(element).parents().length;
    });
}

これは、要素の親の数を返します (要素自体を除き、 と を含み<body>ます<html>)。

于 2013-07-25T07:08:06.437 に答える
0

jQuery を使用してもかまわない場合 --

この質問のテクニックを使用してください -- jQuery: how do I get the element below my cursor? -- マウスが新しい要素の上に移動するたびに更新をトリガーします。

次に、このクエリ メソッド -- .parents() -- を使用して、要素のすべての親の配列を取得できます。

要素の数は、配列の長さ + 1 (要素自体) になります。数えたくない場合は、<html>2<body>を引くことができます。

于 2013-07-25T06:05:22.060 に答える
0

プレーンな JavaScript を使用するのは面倒な場合があります。divs要素の数を見つけるために次の関数を思いつきました

以下は、実際のカウントを行う再帰関数です

function getNumberOfDivs(elem) {
    console.log(elem.parentNode);
    if (elem.parentNode.tagName.toLowerCase() == 'body') return 0;
    if (elem.parentNode.tagName.toLowerCase() == 'div') 
       return 1 + getNumberOfDivs(elem.parentNode);
    return getNumberOfDivs(elem.parentNode);
}

次の関数はgetNumberOfDivs、カウントを見つけるために使用します

function getDivCount() {
    var btn = document.getElementById("btn");
    var count = getNumberOfDivs(btn);
    alert(count);
}

これにより、特定の要素の div の数を見つけるという問題が解決されることを願っています。

于 2013-07-25T06:30:20.133 に答える