जावास्क्रिप्ट - शैली निकालें

<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

      .test {
            background: #ff4040;
            color: #fff;
            display: block;
            font-size: 15px;
      }

अरे दोस्तों, मुझे CSS या simple JavaScript का उपयोग करके पिछले तीन divs से बैकग्राउंड कलर हटाने की जरूरत है। यह शर्तें हैं कि मुझे पिछली तीन डीवाई से केवल शैलियों को हटाने की आवश्यकता है और इससे कोई फर्क नहीं पड़ता कि हम कितने divs का उपयोग कर रहे हैं और इसे लगभग सभी ब्राउज़र में समर्थन करना चाहिए। क्या आप लोग मेरी सहायता कर सकते हैं?

3

10 उत्तर

एक सरल उपाय।

आप अंतिम 3Div का उपयोग करके चयन कर सकते हैं।

.test:nth-last-child(-n+3) {
    /*declarations*/
}
4
जोड़ा
मैं आप लोगों की सराहना करता हूं कि मुझे सही किया।
जोड़ा लेखक Thanveer Shah, स्रोत

जावास्क्रिप्ट का उपयोग करना:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

[...document.querySelectorAll('.test')]
  .splice(-3)
  .forEach(el => el.classList.remove('test'));
.test {
  background: #ff4040;
  color: #fff;
  display: block;
  font-size: 15px;
}
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>
</div> </div>
0
जोड़ा

यहां मैंने स्टाइल बदलने के लिए एक और सीएसएस क्लास बनाई, जो इस मामले में सिर्फ बैकग्राउंड कलर को हटाती है।

मैं जावास्क्रिप्ट का उपयोग उस वर्ग के अंतिम तत्व को 3 बार करने के लिए करता हूं, जो हर बार नई कक्षा जोड़ते हैं और पुरानी कक्षा को हटाते हैं इसलिए पृष्ठभूमि अब चली गई है।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

let element = document.getElementsByClassName("test");
let elementsToRemoveBg = 3;
while (elementsToRemoveBg--){
  element[element.length-1].classList.add("test-no-bg");
  element[element.length-1].classList.remove("test");
}
.test {
  background: #ff4040;
  color: #fff;
  display: block;
  font-size: 15px;
}
.test-no-bg {
  color: #fff;
  display: block;
  font-size: 15px;
}
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>
</div> </div>
0
जोड़ा

केवल CSS के साथ, यदि आप तीसरे के बाद सभी का चयन करना चाहते हैं

  .test:nth-child(n+3) {
        background: none;
  }

https://www.w3schools.com/cssref/sel_nth-child.asp

0
जोड़ा

कोशिश करें: nth-last-child() चयनकर्ता।

Soruce: https://www.w3schools.com/cssref/sel_nth-last-child.asp

0
जोड़ा
हे Marlaqk, मुझे लगता है कि nth बाल संपत्ति यहां काम नहीं करेगी। मुझे पिछली 3 डीवाई से शैली को हटाने की आवश्यकता है। और इससे कोई फर्क नहीं पड़ता कि हम कितने divs का उपयोग करने जा रहे हैं। हमारी स्क्रिप्ट या सीएसएस का उपयोग करने वाले divs की संख्या केवल पिछले 3 divs पर प्रभाव डालती है।
जोड़ा लेखक Bst_coder, स्रोत
या हम प्रत्येक divs के लिए अलग वर्ग जोड़ सकते हैं और हम पिछले अलग divs से इस अलग वर्ग निकालने के लिए जावास्क्रिप्ट कोड लिख सकते हैं। लेकिन मुझे नहीं पता कि कैसे ऐसा करते हैं।
जोड़ा लेखक Bst_coder, स्रोत

आप निम्नलिखित कोड का बेहतर उपयोग करते हैं, इससे पंक्ति की संख्या कम हो जाएगी। अंतिम तीन तत्वों के लिए अलग सीएसएस कोड लिखने की कोई आवश्यकता नहीं है।

    body .test:not(:nth-last-child(-n+3)) {
        background: #ff4040;
        color: #fff;
        display: block;
        font-size: 15px;
  }
0
जोड़ा

एक सरल उपाय। यदि आप अधिक निकालना चाहते हैं तो आप लूप के रूप में रख सकते हैं।

var e=document.querySelectorAll('.test');


e[e.length-1].classList.remove('test')
e[e.length-2].classList.remove('test')
e[e.length-3].classList.remove('test')
0
जोड़ा

एक सरल उपाय। यदि आप अधिक निकालना चाहते हैं तो आप लूप के रूप में रख सकते हैं।

var e=document.querySelectorAll('.test');


e[e.length-1].classList.remove('test')
e[e.length-2].classList.remove('test')
e[e.length-3].classList.remove('test')
0
जोड़ा

सबसे सुंदर तरीका नहीं है, लेकिन आकर्षण की तरह काम करता है।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

<script>
    $(document).ready(function(){
        let $count = $('.test').length;
        let i = 0;
        $('.test').each(function(key,val){
            if(i == Number($count - 3) || i == Number($count - 2) || i == Number($count - 1)){
                $(val).css({'background':'none','color':'black'});
            }
            i++;
        });
    });
</script>
0
जोड़ा
धन्यवाद जपाप, क्या आप इस कोड को एक और विशेषता के साथ संपादित कर सकते हैं?
जोड़ा लेखक Bst_coder, स्रोत
मैं प्रत्येक div के लिए अलग वर्ग जोड़ने जा रहा हूँ और मुझे लगता है कि पिछले पंक्ति में रखा div से हटाने की जरूरत है। यह तीन तलाक, दो तलाक या एक तलाक हो सकता है।
जोड़ा लेखक Bst_coder, स्रोत
@Bst_coder ज़रूर
जोड़ा लेखक Jaapaap, स्रोत
@Bst_coder html के साथ एक jsfiddle भेजें, और मैं देखूंगा कि मैं क्या कर सकता हूं :)
जोड़ा लेखक Jaapaap, स्रोत

यह आपके लिए काम करेगा,

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.test:not(:nth-child(n+4)) {
    background: #ff4040;
    color: #fff;
    display: block;
    font-size: 15px;
}
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>
</div> </div>
0
जोड़ा
मैम, वह आखिरी 3 डी चाहता है, पहले 3 नहीं
जोड़ा लेखक Thanveer Shah, स्रोत