छिपे हुए divs को छोड़ने के लिए nth-child चयनकर्ता कैसे प्राप्त करें

Question

मेरे पास कुछ यादृच्छिक ब्लॉक हैं। जब भी कोई ब्लॉक नई पंक्ति में गिरता है, तो मैं इसे अलग दिख रहा हूं। जब उपयोगकर्ता किसी बटन पर क्लिक करता है, तो मैं display:none द्वारा कुछ ब्लॉक छुपाता हूं, और समस्या होती है। nth-child चयनकर्ता छुपा तत्वों की भी गणना करता है।

क्या उन विशिष्ट ब्लॉक को अनदेखा करने का कोई तरीका है, ताकि प्रत्येक पंक्ति में अलग शैली हो? यह मेरे समान परिदृश्य का एक उदाहरण है।

$('.hide-others').click(function() { 
 
    $('.css--all-photo').toggleClass('hidden'); 
 
})

.board-item--inner { 
 
    height:200px; 
 
    background:tomato; 
 
    text-align:center; 
 
    color:#fff; 
 
    font-size:33px; 
 
    margin-bottom:15px; 
 
    border:2px solid tomato; 
 
} 
 
@media (min-width:768px) and (max-width:991px) { 
 
    .board-item:nth-child(2n+1) .board-item--inner { 
 
     border:2px solid #000; 
 
     background:yellow; 
 
     color:#000; 
 
    } 
 
} 
 
@media (min-width:992px) and (max-width:1199px) { 
 
    .board-item:nth-child(3n+1) .board-item--inner { 
 
    border:2px solid #000; 
 
    background:yellow; 
 
    color:#000; 
 
    } 
 
} 
 
@media (min-width:1200px) { 
 
    .board-item:nth-child(4n+1) .board-item--inner { 
 
    border:2px solid #000; 
 
    background:yellow; 
 
    color:#000; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="form-group"> 
 
     <button class="btn btn-info hide-others" type="button">Hide others</button> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">1</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">2</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo"> 
 
      <div class="board-item--inner">3</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">4</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">5</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo"> 
 
      <div class="board-item--inner">6</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">7</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo"> 
 
      <div class="board-item--inner">8</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">9</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">0</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">10</div> 
 
     </div> 
 
    </div> 
 
    <div>

आप टुकड़ा या EXTERNAL FIDDLE के माध्यम से जाना है, और आप मेरे सवाल का मिल जाएगा।

मैं विशेष रूप से एक शुद्ध सीएसएस समाधान की तलाश में हूं। कृपया अपने उत्तरों के लिए एक पहेली प्रदान करें! और मैं उन ब्लॉक को स्थायी रूप से नहीं हटा सकता, मेरे उपयोगकर्ता के पास बटन क्लिक पर फ़ाइलों को फ़िल्टर करने का विकल्प होता है, यही कारण है कि छुपा और दिखाया गया परिदृश्य।

Answer 1

उपयोगकर्ता एक बटन पर क्लिक करता है, मैं display:none, से कुछ ही ब्लॉक छिपाने के लिए और समस्या तब होती है। nth-child चयनकर्ता छिपा तत्वों की भी गणना करता है।

क्या उन विशिष्ट ब्लॉक को अनदेखा करने का कोई तरीका है, ताकि फिर से प्रत्येक पंक्ति में अलग शैली हो?

समस्या यह है कि nth-child() चयनकर्ता स्टाइल के बावजूद एक ही माता-पिता के अधीन सभी भाई बहनों को देखता है। इससे कोई फर्क नहीं पड़ता कि आपने display: none लागू किया है क्योंकि सीएसएस डीओएम से तत्व को नहीं हटाता है, और इसलिए यह अभी भी एक भाई है।

कल्पना से:

6.6.5.2. :nth-child() pseudo-class

:nth-child(an+b) छद्म वर्ग संकेतन एक तत्व का प्रतिनिधित्व करता है से पहले एक + b -1 भाई बहन है कि यह दस्तावेज़ पेड़ में, किसी भी सकारात्मक पूर्णांक या शून्य के शून्य मान के लिए, और उसके माता-पिताहैं 0 तत्व(जोर मेरा)

nth-child नियम आप एक उपयोगकर्ता के बाद काम करने के लिए घोषित किए गए आदेश में divs को छिपाने के लिए क्लिक करता है, तो आप की जरूरत डोम से छिपा divs को दूर है, इसलिए वे अब मौजूद नहीं हैं भाई बहन के रूप में।

आपके प्रश्न में आप एक सीएसएस-केवल समाधान का अनुरोध करते हैं। लेकिन आपकी टिप्पणियों में आप कहते हैं कि एचटीएमएल परिवर्तन के लिए खुला है। तत्वों को छिपाने के लिए आप थोड़ी सी jQuery का भी उपयोग करते हैं।

कोड में से एक छोटी लाइन के साथ अपने jQuery को जोड़ा समस्या हल किया जा सकता:

$('.hidden').remove(); 

.remove() method डोम से बाहर तत्वों (और उसके वंश) लेता है। इस मामले में यह कक्षा hidden के साथ सभी तत्वों को हटा देता है।

---

सुधार

remove() साथ समस्या यह है इस विधि के साथ डोम से लिया तत्वों पुनर्स्थापित किया जाता है कि नहीं किया जा सकता है, और इस टॉगल समारोह टूट जाता है।

सौभाग्य से, jQuery एक विकल्प प्रदान करता है: detach()। सिवाय इसके कि .detach() हटाया तत्वों के साथ जुड़े सभी jQuery डेटा रखता

.detach() विधि, .remove() के समान है। यह विधि तब उपयोगी होती है जब हटाए गए तत्व बाद में डोम में पुन: सम्मिलित होते हैं।

तो अगर हम मूल कोड के स्थान पर ...

$('.hide-others').click(function() { 
    $('.css--all-photo').toggleClass('hidden'); 
}) 

... इस कोड के साथ ...

var divs; 

$('.photos-board-item').each(function(i){ 
    $(this).data('initial-index', i); 
}); 

$('.hide-others').on('click', function() { 
    if(divs) { 
     $(divs).appendTo('.row').each(function(){ 
      var oldIndex = $(this).data('initial-index'); 
      $('.photos-board-item').eq(oldIndex).before(this); 
     }); 
     divs = null; 
    } else { 
     divs = $('.css--all-photo').detach(); 
    } 
}); 

... ग्रिड के रूप में इरादा काम करता है। (कोड क्रेडिट: @JosephMarikle)

DEMO

अब है, जो की परवाह किए बिना divs या कितने छिपे हुए हैं, वे दृश्य डिजाइन क्योंकि nth-child चयनकर्ता केवल "दृश्यमान" भाई बहन की गिनती को भंग किए बिना चालू और बंद टॉगल किया जा सकता । सीएसएस में कोई बदलाव नहीं। एचटीएमएल में कोई बदलाव नहीं।

Answer 2

यहाँ

मैं क्या मतलब का एक उदाहरण: https://jsfiddle.net/happy2deepak/g7gL5zfb/4/ इस मामले में यह वर्ग .css--all-photo साथ तत्वों पर ध्यान नहीं देगा ... लेकिन आप जो भी वर्ग पर ध्यान नहीं देना

$('.hide-others').click(function() { 
    $('.user-a').not('.css--all-photo').toggleClass('hidden'); 
}) 

Answer 3

आप के लिए क्या देख रहे हैं चाहते का उपयोग कर सकते में दुर्भाग्यवश मौजूद नहीं है जो दुर्भाग्य से मौजूद नहीं है! जब आप जेएस के साथ छिपे हुए वर्ग को टॉगल करते हैं, तो छुपा और दिखाए गए बच्चों के बीच यह एकमात्र अंतर है, इसलिए आपको कुछ वर्ग, ("दिखाया गया" कहें) के divs को गिनने के लिए सीएसएस को बताना होगा, लेकिन दुर्भाग्यवश, सीएसएस एनएच-बच्चे चयनकर्ता बच्चे के वर्गों पर ज्यादा ध्यान नहीं देता है। आप और here पढ़ सकते हैं।

Answer 4

मैं :nth-of-type चयनकर्ता और आपके टॉगल फ़ंक्शन के छोटे संशोधन के संयोजन के साथ ऐसा करूंगा।

मूल विचार उन D12 से .css--all-photo तत्वों को निकालना नहीं है, लेकिन उन्हें <hidden> कंटेनर में लपेटें। और पूर्ण सेट को पुनर्स्थापित करने के लिए unwrap()। इस मामले में :nth-of-type ठीक उसी तरह करेगा जो आपने :nth-child के साथ किया था।

var state = false; 
 

 
$('.hide-others').click(function() { 
 
    if(!state) { 
 
     $('.css--all-photo').wrap('<hidden>'); 
 
     state = true; 
 
    } else { 
 
     $('hidden').unwrap(); 
 
     state = false; 
 
    } 
 
})

hidden { display:none; } 
 

 
.board-item--inner { 
 
    height:200px; 
 
    background:tomato; 
 
    text-align:center; 
 
    color:#fff; 
 
    font-size:33px; 
 
    margin-bottom:15px; 
 
    border:2px solid tomato; 
 
} 
 
@media (min-width:768px) and (max-width:991px) { 
 
    div.board-item:nth-of-type(2n+1) .board-item--inner { 
 
     border:2px solid #000; 
 
     background:yellow; 
 
     color:#000; 
 
    } 
 
} 
 
@media (min-width:992px) and (max-width:1199px) { 
 
    div.board-item:nth-of-type(3n+1) .board-item--inner { 
 
    border:2px solid #000; 
 
    background:yellow; 
 
    color:#000; 
 
    } 
 
} 
 
@media (min-width:1200px) { 
 
    div.board-item:nth-of-type(4n+1) .board-item--inner { 
 
    border:2px solid #000; 
 
    background:yellow; 
 
    color:#000; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="form-group"> 
 
     <button class="btn btn-info hide-others" type="button">Hide others</button> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">1</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">2</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo"> 
 
      <div class="board-item--inner">3</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">4</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">5</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo"> 
 
      <div class="board-item--inner">6</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">7</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo"> 
 
      <div class="board-item--inner">8</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">9</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">0</div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item"> 
 
      <div class="board-item--inner">10</div> 
 
     </div> 
 
    </div> 
 
    <div>