मेरे पास यह सरल लूप है जो DOM में किसी तत्व में z-index जोड़ता है।

let init = () => {
  let allDivs = document.querySelectorAll(".pa");
  let initialIndex = 1;

  for (let i = 0; i < allDivs.length; i++) {
    allDivs[i].style.zIndex = initialIndex++
  }
}
init();
<div class="ma">
   <div class="pa">Test</div>
   <div class="pa">Test</div>
   <div class="pa">Test</div>
</div>

फिर, बदले में, मेरे सभी .pa divs को इंडेक्स लागू किया जाता है और एक से वृद्धि होती है।

समस्या यह है कि मुझे दूसरी तरफ जाने की जरूरत है। उच्चतम से शुरू करने के लिए, चाहे वह 3, 5 या 10 हो और फिर पीछे की ओर काम करें।


मौजूदा उत्पादन

<div class="pa" style="z-index: 1;"></div>
<div class="pa" style="z-index: 2;"></div>
<div class="pa" style="z-index: 3;"></div>

वांछित आउटपुट

<div class="pa" style="z-index: 3;"></div>
<div class="pa" style="z-index: 2;"></div>
<div class="pa" style="z-index: 1;"></div>

मैंने -- का उपयोग करने का प्रयास किया था, इसलिए यह allDivs[i].style.zIndex = initialIndex-- पढ़ेगा लेकिन इसने z-index को 1,0,-1 से नीचे ले लिया।

शायद एक सुपर गूंगा सवाल लेकिन मैं यह नहीं समझ सकता कि मैं यह कैसे करूँगा?

1
cmp 24 नवम्बर 2019, 17:07

4 जवाब

सबसे बढ़िया उत्तर

आप सरणी को उल्टा कर सकते हैं

let init = () => {
  let allDivs = document.querySelectorAll(".pa");

  let initialIndex = 1;

  for (let i = allDivs.length - 1; i >= 0; i--) {

    allDivs[i].style.zIndex = initialIndex++
  }
}
init();
<div class="ma">
  <div class="pa">Test</div>
  <div class="pa">Test</div>
  <div class="pa">Test</div>
</div>
1
Shubh 24 नवम्बर 2019, 17:14

आप initialIndex को सरणी की लंबाई के साथ शुरू कर सकते हैं, फिर प्रत्येक लूप द्वारा घटते हुए।

let init = () => {
  let allDivs = document.querySelectorAll(".pa");
  let initialIndex = allDivs.length;
  for (let i = 0; i < allDivs.length; i++) {
    allDivs[i].style.zIndex = initialIndex--
  }
}
init();

आप IIFE का भी उपयोग कर सकते हैं यदि आपका init फ़ंक्शन केवल यहां उपयोग किया जाता है।

(() => {
  let allDivs = document.querySelectorAll(".pa");
  let initialIndex = allDivs.length;
  for (let i = 0; i < allDivs.length; i++) {
    allDivs[i].style.zIndex = initialIndex--
  }
})()
2
junwen-k 24 नवम्बर 2019, 17:18

तकनीकी रूप से आपको जो बदलने की जरूरत है वह निम्नलिखित है:

  1. अपने सरणी की लंबाई से लूप शुरू करना,
  2. इसे पीछे की ओर चलाने के लिए i-- का उपयोग करना,
  3. div तत्व को allDivs[i - 1] द्वारा संदर्भित करना क्योंकि अनुक्रमण शून्य से शुरू होता है,
  4. i का मान zIndex में जोड़ना।

मूल्यों को देखने के लिए मेरे समाधान में अतिरिक्त लॉगिंग जोड़ा गया है, इसलिए मैं किसी भी तरह निम्नलिखित हूं:

const init = () => {
  let allDivs = document.querySelectorAll(".pa");

  for (let i = allDivs.length; i > 0; i--) {
    allDivs[i - 1].style.zIndex = i;
    console.log(allDivs[i - 1]);
  }
}
init();
<div class="ma">
   <div class="pa">Test</div>
   <div class="pa">Test</div>
   <div class="pa">Test</div>
</div>

उम्मीद है ये मदद करेगा!

1
norbitrial 24 नवम्बर 2019, 17:29

यह काम करना चाहिए:

let init = () => {
  let allDivs = document.querySelectorAll(".pa");
  let initialIndex = 1;

  for (let i = 0; i < allDivs.length; i++) {
    allDivs[i].style.zIndex = allDivs.length - initialIndex++;
  }
}
init();

मैंने एक व्यंजक का उपयोग किया, ताकि i का मान जितना अधिक होगा, zIndex का मान उतना ही कम होगा। एक अधिक सुरुचिपूर्ण, कार्यात्मक प्रोग्रामिंग समाधान होगा (देखें प्रत्येक दस्तावेज़ के लिए)

let init = () => {
  const allDivs = document.querySelectorAll(".pa");
  allDivs.forEach((element, index) => element.style.zIndex = allDivs.length - index)l
}
init();

मैंने उपयोग करने का प्रयास किया - इसलिए यह सभी डिव्स [i] .style.zIndex = प्रारंभिक इंडेक्स पढ़ेगा - लेकिन इसने जेड-इंडेक्स को 1,0, -1 से नीचे ले लिया।

आप शायद अभी भी let initialIndex = 1 से शुरुआत कर रहे थे। तो आपके वेरिएबल के मान 1, फिर 0, फिर -1 थे, और यह -2, -3, आदि तक जारी रहेगा। आप संभवतः allDivs.length - अनुक्रमणिका पर शुरू करना चाहते थे।

0
Reinis Mazeiks 24 नवम्बर 2019, 17:15