0

親の子のインデックスを取得しようとしています。例えば：-

<div>
    <table>
        <tr id="rahul">
            <td> Hi this is ABC </td>
            <td> Hi this is XYZ </td>
        </tr>
    </table>
</div>

そして私のJavaスクリプトコードは次のとおりです：-

<script>
    $(document).ready(function() {
        document.onmousedown = mouseDown;
        function mouseDown(e) {
            var element =  document.elementFromPoint(e.clientX,e.clientY);
            console.log("Clicked element is:" + element.tagName);
            var i=1;
            while (element.nextSibling != null) {
                element = element.nextSibling;
                console.log('Sibling No:' + (i++) + " " + element.tagName);
            }
        }
    });
</script>

私によると「こんにちはこれはABCです」をクリックすると、印刷されます

Sibling No.1 TD

でも実は印刷です

Clicked element is:TD jsoupTest.html:10
Sibling No:1 undefined jsoupTest.html:14
Sibling No:2 TD jsoupTest.html:14
Sibling No:3 undefined

なぜこれがTDの兄弟として未定義で印刷されているのか疑問が生じますか？そして、私の考えは、クリックされた要素が持っている兄弟の数を見つけることであり、その親が持っている子の総数を見つけることができます。これで、親の子の総数から兄弟の数を引くことで、クリックされた要素のインデックスを見つけることができます。

これを取得するためのより良い代替手段があるかどうか教えてください。

4

2 に答える 2

2

子要素がその兄弟要素に対してどのインデックスであるかを知りたい場合は、jQueryを介してそれを行うことができますindex（非要素ノードを検討する場合は、さらに下を参照してください）。

$(document).ready(function() {
    document.onmousedown = mouseDown;
    function mouseDown(e) {
        var element =  document.elementFromPoint(e.clientX,e.clientY);
        console.log("Clicked element is:" + element.tagName);
        console.log("Index: " + $(element).index());
    }
});

実例| ソース

考慮されるのは要素のみであり、そこに存在する可能性のある他の種類のノード（特にテキストノード）は考慮されないことに注意してください。これは、おそらく約90％の時間、場合によってはそれ以上の時間で必要なものです。:-)要素だけでなく、他のノードタイプを本当に検討したい場合は、例$.inArray(element, $(element).parent().contents())ではなくを使用してください。$(element).index()

$(document).ready(function() {
    document.onmousedown = mouseDown;
    function mouseDown(e) {
        var element =  document.elementFromPoint(e.clientX,e.clientY);
        console.log("Clicked element is:" + element.tagName);
        console.log("Index: " + $.inArray(element, $(element).parent().contents()));
        // ^--- this is the only line that changed
    }
});

ライブコピー| ソース

補足：ラインを置き換えることができると確信しています

var element =  document.elementFromPoint(e.clientX,e.clientY);

...と

var element =  e.target;

...targetボタンが押されたときのマウスの下の一番上の要素になります。

于 2012-06-14T11:19:14.027 に答える
1

まず、のclick代わりにイベントを使用する必要がありmousedownます。次に、on<event>-propertyを使用するのではなく、リスナーを追加する適切な方法を使用する必要があります。jQuery（既にロード済み）は、単純でクロスブラウザーの方法を提供します。

次に、document.elementFromPointマウスイベントの座標では使用せずtarget、イベントのプロパティを使用するだけです。

$(document).on("click", function(e) {
     var element = e.target;
     ...
});

次に、ループ：

        var i=1;
        while (element.nextSibling != null) {
            element = element.nextSibling;
            console.log('Sibling No:' + (i++) + " " + element.tagName);
        }

このコードは、の後に続くすべての兄弟を出力しますelement。これはあなたが望むものではないようです。その前に兄弟を数えたいですよね？次に使用.previousSiblingします。

また、テキストノード、ログのログも含まれundefinedますnodeName。これを回避するには、を使用できます[previous|next]ElementSibling。

...その親が持っている子供の総数を調べます

ああ、それははるかに簡単な作業です：

element.parentNode.children.length;
// or even
element.parentNode.childElementCount;
// to include text nodes:
element.parentNode.childNodes.length;
于 2012-06-14T11:30:40.400 に答える