html - Apply style to grandparent of the grandchild with specific value -
इस सवाल का पहले से ही एक उत्तर है: < / p>
- 25 जवाब
मेरे पास निम्न कोड है:
& lt; div class = "photos-wrapper" id = "detailphoto" & gt; & Lt; div वर्ग = "छद्म" & gt; & Lt; a href = "# / 123456 /" & gt; निर्धारित कनेक्टर & lt; / a & gt; & Lt; / div & gt; & Lt; div class = "image-wrapper" & gt; & Lt; a href = "#" & gt; & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "सक्रिय" & gt; & Lt; a href = "#" & gt; & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "टिप्पणी" & gt; & Lt; a href = "#" & gt; & lt; / a & gt; & Lt; / div & gt; & Lt; / div & gt;
मैं अपनी सीएसएस शैली को इस प्रथम और मुख्य
और div
में शामिल करना चाहता हूं, लेकिन ऐसा करने का एकमात्र तरीका पोते की चयनकर्ता यानीऔर lt; a href = "# / 123456 /" & gt; की पहचान कर रहा है क्योंकि एक ही कोड के कई घटनाएं हैं शायद यह थोड़ा और अधिक स्पष्ट होगा जब मैं दिखाता हूँ कि मैंने क्या किया:
a [href * = "123456"]> gt; Div.pseudo & gt; Div.photos-wrapper [आईडी = "विवरणफोटो"] {प्रदर्शन: कोई नहीं! महत्वपूर्ण; } Div.photos-wrapper [id = "detailphoto"] & lt; Div.pseudo & lt; एक [href * = "123456"] {display: none! महत्वपूर्ण; }
इसी तरह से मैंने ऐसा करने की कोशिश की लेकिन यह स्पष्ट रूप से काम नहीं कर रहा है। मैं जो काम कर रहा हूं वह शायद एक माता पिता चयनकर्ता कहलाता है, लेकिन मुझे पूरा यकीन नहीं है।
@ एडिट, इस कोड पर एक नजर डालें, यह वास्तव में अधिक विस्तृत है:
लक्ष्य को
डिस्प्ले: कोई भी नहीं शैली के पूरे डिव्स से छिपाना है जो कि समान मूल्यों वाले अर्थात्
& lt; a href = "# / 000000 /" & gt; फोटो 1 & lt; / a & gt;
जैसा कि मैंने आपके उत्तर में अपनी टिप्पणी में बताया , माता-पिता या पूर्वजों का सीलकोर नहीं है JQuery के माध्यम से इसे करने के लिए सबसे आसान और सबसे कारगर तरीका है
है () ।
$ ('# detailphoto')। ('A [href * । "123456"] ') को छिपाने (); // या .addClass () के बजाय
का उपयोग करें।
: मैंने डेमो में क्लास चयनकर्ता का उपयोग किया है क्योंकि आईडी अनन्य होना चाहिए।
UPDATE
आपके अपडेट को देखते हुए और मानते हुए कि आप प्रत्येक फोटो के 1 और केवल 1 को प्रदर्शित करना चाहते हैं, साथ में फ़ोटो के साथ अतिरिक्त रैपर एक ही href छिपी होगी।
$ ("।-photos-wrapper .seo a)"। प्रत्येक (फ़ंक्शन () {var $ this = $ (this); var href = $ this.attr ("href"); // यदि href पहले एनॉइंट किया गया है , .photos-wrapper पूर्वजों को छिपाना अगर (पाया [href]) {$ this.closest ("फोटो-आवरण")। Hide (); / * अन्य विकल्प: सीएसएस प्रत्यक्ष $ this.closest ("photos- आवरण ")। सीएसएस (" डिस्प्ले "," कोई नहीं "); डुप्लिकेट क्लास निरुपित करें, फिर उस वर्ग के गधे को उचित $ this.closest ("। Photos-wrapper ") लिखें। AddClass (" डुप्लिकेट "); * /} else {// अन्यथा इसे जो पाया गया है उसे सरणी में जोड़ दें [href] = सत्य;}});यदि आप jquery से परिचित नहीं हैं, तो इसे कैसे कार्यान्वित किया जाता है और
$ (document) के उद्देश्य पर पढ़ना सुनिश्चित करें .ready ();
अपडेट 2
प्रतिकृत
href उपयोग के साथ सभी कंटेनरों को छिपाने के लिए: प्रत्येक टैग के माध्यम से
// लूप करें ("। Photos-wrapper .seudo a")। प्रत्येक (फ़ंक्शन () {var $ this = $ (this); // href var href = $ प्राप्त करें This.attr ("href"); // यदि एक से अधिक मौजूद है, तो जांचें कि ($ ('। Photos-wrapper .season।) एक। [आकार] () & gt; 1) {// सभी छुपाएं। फोटो-रेप्पर कंटेनर जिनकी दोहराए गए href $ ('। Photos-wrapper .seudo a [href = "' + href + '"]')। निकटतम ("फ़ोटो-आवरण")। ();}});
मैं अब भी सुझाव देता हूं कि यदि संभव हो तो सर्वर-साइड डुप्लिकेट को निकाल दे।
एक पूर्ण पक्ष नोट पर,
& lt; केंद्र & gt; टैग को HTML4 पर वापस घिसला गया था और इसे अब उपयोग नहीं किया जाना चाहिए इसके बजाय सीएसएस का उपयोग करें सीएसएस का उपयोग कर केंद्र सामग्री के बारे में उदाहरणों का पुष्टिकरण है।
Comments
Post a Comment