0

以下のように配置された要素があると推定しましょう。

<div><input class="elementToGet" value="1"></div>           // st elementToGet
<div><span class"button">get prev elementToGet</span></div> // Nr1
<div><span class"button">get prev elementToGet</span></div> // Nr2
<div><span class"button">get prev elementToGet</span></div> // Nr3
<div><input class="elementToGet" value="2"></div>           // nd elementToGet
<div><span class"button">get prev elementToGet</span></div> // Nr4
<div><span class"button">get prev elementToGet</span></div> // Nr5
<div><span class"button">get prev elementToGet</span></div> // Nr6

elementToGet各スパンの以前のものを取得するにはどうすればよいですか?

たとえば、4 から番号が付けられた要素は 2 番目の を取得しelementToGetます。

フレームワークを必要としない Javascript。

function getPrev(className) {
    var items = [], myPosts = document.getElementsByClassName(className);

    for (var i = 0; i < myPosts.length; i++) {

        // I have no ideas what to do next

        items.push(myPosts[i]);
    }
    return items[0];
}
4

2 に答える 2

2

あなたが欲しいものを手に入れるために、あなたは周りを回るparentNodeために使うことができます。次に、を使用してDOMをトラバースし、を使用して必要な入力を見つけることができます。divspanpreviousSiblingchildNodes firstChild

私はこれをすばやく一緒にハックしました：

var span = document.getElementsByClassName('button')[4], // one of the "button" spans
    div = span.parentNode, // get the span's parent div
    ele,  // variable to hold the element we are looking for
    temp; // temp var for the loop

while ((div = div.previousSibling) !== null) {  // Loop through all the previous divs
    temp = div.firstChild;  // get the div's children
    if (temp && temp.className === 'elementToGet') { // does it's 1st child have the class?
        ele = temp;  // we found it!
        break;
    }
}
alert(ele.value);​

デモ：http：//jsfiddle.net/zH4SU/1/

于 2012-09-18T16:27:57.467 に答える
1

JQuery を使用している場合は.closest()を使用でき、DOM ツリーを上に移動します

于 2012-09-18T16:13:06.673 に答える