जावास्क्रिप्ट का उपयोग करके अगला / पिछला तत्व प्राप्त करें?

Question

मुझे जावास्क्रिप्ट का उपयोग करके HTML में अगला तत्व कैसे मिलेगा?

मान लीजिए कि मेरे पास तीन <div>एस हैं और मुझे जावास्क्रिप्ट कोड में एक का संदर्भ मिलता है, मैं प्राप्त करना चाहता हूं जो कि अगला है <div>और जो पिछले है।

Answer 1

अच्छी तरह से शुद्ध जावास्क्रिप्ट में मेरी सोच यह है कि आपको पहले उन्हें एक संग्रह के अंदर समेटना होगा।

var divs = document.getElementsByTagName("div");
//divs now contain each and every div element on the page
var selectionDiv = document.getElementById("MySecondDiv");

तो मूल रूप से चयन के साथ इसका सूचकांक खोजने के लिए संग्रह के माध्यम से iterate, और फिर स्पष्ट रूप से -1 = पिछले +1 = अगले सीमा के भीतर

for(var i = 0; i < divs.length;i++)
{
   if(divs[i] == selectionDiv)
   {
     var previous = divs[i - 1];
     var next = divs[i + 1];
   }
}

कृपया ध्यान रखें, जैसा कि मैं कहता हूं कि अतिरिक्त तर्क यह जांचने के लिए आवश्यक होगा कि आप सीमा के भीतर हैं यानी आप संग्रह के अंत में या शुरुआत में नहीं हैं।

इसका मतलब यह भी होगा कि कहें कि आपके पास एक div है जिसमें चाइल्ड डिव नेस्टेड है। अगली डिबेट एक भाई-बहन नहीं बल्कि एक बच्चा होगा, इसलिए यदि आप केवल भाई-बहनों को उसी स्तर पर चाहते हैं जो टार्गेट डिव के रूप में है तो निश्चित रूप से टैगनेम प्रॉपर्टी की जांच करते हुए अगली सिब्लिंग का उपयोग करें ।

Comments

अच्छा समाधान है, लेकिन अगला तत्व कैसे प्राप्त करें, जैसा कि आपने लिखा है कि अब मेरे पास संग्रह और चयनित एक है, क्या आप मेरी अधिक सहायता कर सकते हैं?

— अमृत ​​एल्गारिह

Answer 2

nextSiblingऔर previousSiblingगुणों का उपयोग करें :

<div id="foo1"></div>
<div id="foo2"></div>
<div id="foo3"></div>

document.getElementById('foo2').nextSibling; // #foo3
document.getElementById('foo2').previousSibling; // #foo1

हालांकि कुछ ब्राउज़रों में (मैं भूल जाता हूं कि आपको व्हाट्सएप की जांच करने और नोड्स की टिप्पणी करने की आवश्यकता है:

var div = document.getElementById('foo2');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
    nextSibling = nextSibling.nextSibling
}

JQuery जैसी लाइब्रेरी आपके लिए ये सभी क्रॉस-ब्राउज़र चेक बॉक्स से बाहर रखती है।

Comments

नेक्स्टइमलीबलिंग ज्यादा उपयोगी है।

— त्रिशूल

ध्यान दें कि न तो nextSibling और न ही nextElementSibling पूरी तरह से क्रॉस ब्राउज़र संगत है। फ़ायरफ़ॉक्स का अगला सिब्लिंग टेक्स्ट नोड्स देता है जबकि IE नहीं करता है और नेक्स्टइज़ीब्लिंग IE9 तक लागू नहीं होता है।

— कार्ल ऑनगर

यह काम नहीं करेगा यदि तत्व भाई बहन नहीं हैं।

— rvighne

@ क्लोअर: प्रश्न पूछा गया कि HTML में "अगला [div] तत्व कैसे प्राप्त करें।" divमार्कअप में अगला तत्व के निकट नहीं हो सकता है; यह एक स्तर गहरा या एक उच्च स्तर हो सकता है।

— rvighne

@leonbloy मैं आपकी टिप्पणी को नहीं समझता। आप मूल रूप से कह रहे हैं कि if i write dirty HTML, Javascript will act strangeस्वच्छ और वैध HTML कैसे लिखें ?

— दैविक

Answer 3

वास्तव में आपके दस्तावेज़ की समग्र संरचना पर निर्भर करता है।

यदि आपके पास है:

<div></div>
<div></div>
<div></div>

यह प्रयोग करने के माध्यम से ट्रैवर्सिंग जितना सरल हो सकता है

mydiv.nextSibling;
mydiv.previousSibling;

हालाँकि, यदि 'अगला' div दस्तावेज़ में कहीं भी हो सकता है, तो आपको अधिक जटिल समाधान की आवश्यकता होगी। आप कुछ प्रयोग करके देख सकते हैं

document.getElementsByTagName("div");

और इन के माध्यम से चल रहा है जहाँ आप किसी तरह चाहते हैं पाने के लिए।

यदि आप इस तरह के बहुत सारे जटिल DOM ट्रैवर्सिंग कर रहे हैं, तो मैं एक पुस्तकालय जैसे jQuery में देखने की सलाह दूंगा।

Comments

nextSibling () .. होना चाहिए nextSibling, मुझे लगता है

— paul_h

Answer 4

हर HTMLElement पर एक विशेषता है, "पिछलेइलीमेंटबलिंग"।

उदाहरण के लिए:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">c</div>

<div id="result">Resultado: </div>

---

var b = document.getElementById("c").previousElementSibling;

document.getElementById("result").innerHTML += b.innerHTML;

लाइव: http://jsfiddle.net/QukKM/

Comments

यह IE8 पर विफल रहता है (अन्य IE संस्करणों पर जाँच नहीं की गई है)। previousSiblingलगता है कि पार ब्राउज़र समाधान है।

— निक्स

Answer 5

यह आसान होगा ... इसका शुद्ध जावास्क्रिप्ट कोड

    <script>
           alert(document.getElementById("someElement").previousElementSibling.innerHTML);
    </script>

Answer 6

ये सभी समाधान एक ओवरकिल की तरह दिखते हैं। मेरे समाधान का उपयोग क्यों करें?

previousElementSibling IE9 से समर्थित

document.addEventListener एक पॉलीफिल की जरूरत है

previousSibling पाठ वापस कर सकते हैं

कृपया ध्यान दें कि मैंने मामले की सीमाओं में पहला / अंतिम तत्व वापस करने के लिए चुना है। एक आरएल उपयोग में, मैं इसे एक अशक्त लौटाना पसंद करूंगा।

var el = document.getElementById("child1"),
    children = el.parentNode.children,
    len = children.length,
    ind = [].indexOf.call(children, el),
    nextEl = children[ind === len ? len : ind + 1],
    prevEl = children[ind === 0 ? 0 : ind - 1];
    
    document.write(nextEl.id);
    document.write("<br/>");
    document.write(prevEl.id);

<div id="parent">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

Answer 7

इसका परीक्षण किया और इसने मेरे लिए काम किया। मुझे खोजने वाला तत्व आपके पास मौजूद दस्तावेज़ संरचना के अनुसार बदलता है।

<html>
    <head>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <form method="post" id = "formId" action="action.php" onsubmit="return false;">
            <table>
                <tr>
                    <td>
                        <label class="standard_text">E-mail</label>
                    </td>
                    <td><input class="textarea"  name="mail" id="mail" placeholder="E-mail"></label></td>
                    <td><input class="textarea"  name="name" id="name" placeholder="E-mail">   </label></td>
                    <td><input class="textarea"  name="myname" id="myname" placeholder="E-mail"></label></td>
                    <td><div class="check_icon icon_yes" style="display:none" id="mail_ok_icon"></div></td>
                    <td><div class="check_icon icon_no" style="display:none" id="mail_no_icon"></div></label></td>
                    <td><div class="check_message" style="display:none" id="mail_message"><label class="important_text">The email format is not correct!</label></div></td>
                </tr>
            </table>
            <input class="button_submit" type="submit" name="send_form" value="Register"/>
        </form>
    </body>
</html>

 

var inputs;
document.addEventListener("DOMContentLoaded", function(event) {
    var form = document.getElementById('formId');
    inputs = form.getElementsByTagName("input");
    for(var i = 0 ; i < inputs.length;i++) {
        inputs[i].addEventListener('keydown', function(e){
            if(e.keyCode == 13) {
                var currentIndex = findElement(e.target)
                if(currentIndex > -1 && currentIndex < inputs.length) {
                    inputs[currentIndex+1].focus();
                }
            }   
        });
    }
});

function findElement(element) {
    var index = -1;
    for(var i = 0; i < inputs.length; i++) {
        if(inputs[i] == element) {
            return i;
        }
    }
    return index;
}