एनएच-चाइल्ड छद्म चयनकर्ता को एक विशिष्ट पंक्ति वर्ग

Question

पर लागू करना मुझे एक समस्या है कि मुझे यह पता नहीं है कि यह ब्राउज़र की बात है या CSS3 चीज़ है।

<table> 
    <thead> 
     ... 
    </thead> 
    <tbody> 
     <tr class="found"> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
     </tr> 
     <tr class="found"> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
     </tr> 
     <tr class="found"> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
     </tr> 
    </tbody> 
</table> 

मैं एक jQuery समारोह है कि टीडी तत्वों की सामग्री को खोज कर रहा है है:

मैं एक datagrid एक मानक HTML तालिका का उपयोग कर सकते है। यदि यह पाया जाता है, तो यह पाए गए वर्ग को बनाए रखता है। यदि यह नहीं मिला है, तो यह पाए गए वर्ग को हटा देता है और एक ज्ञात वर्ग जोड़ता है। स्वाभाविक रूप से, न केवल पाया गया डिस्प्ले सेट: कोई भी

तो खोज फ़ंक्शन जिस तरह से मैं चाहता हूं वह काम कर रहा है। कक्षाओं को उचित रूप से असाइन किया जा रहा है। हालांकि, मैं वैकल्पिक पंक्तियों के लिए स्टाइल लागू करने के लिए सीएसएस छद्म चयनकर्ताओं का उपयोग कर रहा हूं।

tr.found:nth-child(even) { 
    background: #fff; 
} 
tr.found:nth-child(odd) { 
    background: #000; 
} 

यह खोज होने से पहले बहुत अच्छा काम करता है। हालांकि, एक खोज और ज्ञात वर्ग लागू होने के बाद, छद्म चयनकर्ता केवल तत्व और कक्षा के बजाय तत्व पर लागू होता प्रतीत होता है। या तो, या छद्म चयनकर्ता पृष्ठ लोड के दौरान लागू होते हैं और उस बिंदु पर स्थैतिक छोड़ दिए जाते हैं।

मैं अपनी jQuery खोज में जा सकता हूं और विशिष्ट और विषम कक्षाओं को फिर से सौंप सकता हूं, लेकिन यह गन्दा हो जाता है। यह एक सौदा का बड़ा नहीं होगा, लेकिन मेरे कॉलम हेडर क्रमबद्ध हैं, इसलिए मुझे उस घटना पर कक्षाओं को फिर से लागू करना होगा और साथ ही साथ जो कुछ भी कर रहा हूं, उसे करने के लिए एक अक्षम विधि तैयार करना होगा। यदि डेटा के नमूने बहुत बड़े हो जाते हैं, तो संभवतः आप क्लास को बदलते हुए देख पाएंगे, जो कुछ मैं टालने का प्रयास कर रहा हूं।

इस के लिए कोई समाधान?

संपादित

के रूप में अनुरोध किया है, मैं सेटअप एक JSFiddle ताकि आप प्रतिभाशाली इसके साथ खिलौना कर सकते हैं: http://jsfiddle.net/bDePR/

राष्ट्रपति या सचिव के लिए खोज व्यवहार निकलेगा।

Answer 1

यह सबसे आसान तरीका है जिसके साथ मैं आ सकता हूं, jQuery का उपयोग करें: दृश्यमान चयनकर्ता सभी दृश्यमान टी तत्वों को ढूंढने के लिए (क्रमबद्ध किए जाने के बाद) बस वैकल्पिक रूप से सीएसएस लागू करें!

// reset the background 
$j('tr').css('background', '#ccc'); 
$j('tr:visible').each(function(i){ 
    if((i % 2) == 0) { 
     // apply background to every other one 
     $j(this).css('background', 'yellow'); 
    } 
}); 

उदा। http://jsfiddle.net/bDePR/1/

संपादित करें:

यह @amustill ही करता है लेकिन अधिक कुशल/संक्षिप्त है द्वारा

// reset the background 
$j('tr').css('background', '#ccc'); 
$j('.found').filter(':odd').css({ background: 'yellow' });