JQuery का उपयोग करके एक तत्व का शीर्षक विशेषता कैसे बदलें

Question

मेरे पास एक फॉर्म इनपुट एलिमेंट है और इसके शीर्षक विशेषता को बदलना चाहते हैं। यह पाई के रूप में आसान होना चाहिए, लेकिन किसी कारण से मैं यह नहीं कर सकता कि यह कैसे करना है। यह कैसे किया जाता है, और मुझे यह कैसे और कहां करना चाहिए?

Answer 1

इससे पहले कि हम कोई कोड लिखें, आइए विशेषताओं और गुणों के बीच अंतर पर चर्चा करें। विशेषताएँ आपके HTML मार्कअप में तत्वों पर लागू होने वाली सेटिंग्स हैं ; ब्राउज़र तब मार्कअप को पार्स करता है और विभिन्न प्रकार के डोम ऑब्जेक्ट बनाता है जिसमें विशेषताओं के मूल्यों के साथ आरंभिक गुण होते हैं । डोम ऑब्जेक्ट्स पर, जैसे कि एक सरल HTMLElement, आप लगभग हमेशा इसके गुणों के साथ काम करना चाहते हैं , न कि इसके गुणों का संग्रह।

वर्तमान सर्वोत्तम अभ्यास विशेषताओं के साथ काम करने से बचने के लिए है जब तक कि वे कस्टम नहीं हैं या इसके पूरक के लिए कोई समान संपत्ति नहीं है। चूंकि titleवास्तव में कई एस पर पढ़ने / लिखने की संपत्ति के रूप में मौजूद है HTMLElement, हमें इसका लाभ उठाना चाहिए।

आप यहां या यहां विशेषताओं और गुणों के बीच अंतर के बारे में अधिक पढ़ सकते हैं ।

इसे ध्यान में रखते हुए, चलो कि हेरफेर title...

JQuery के बिना एक तत्व की titleसंपत्ति प्राप्त करें या सेट करें

चूंकि titleएक सार्वजनिक संपत्ति है, आप इसे किसी भी DOM तत्व पर सेट कर सकते हैं जो इसे सादे जावास्क्रिप्ट के साथ समर्थन करता है:

document.getElementById('yourElementId').title = 'your new title';

पुनर्प्राप्ति लगभग समान है; यहां कुछ खास नहीं:

var elementTitle = document.getElementById('yourElementId').title;

यदि आप एक अनुकूलन नट हैं, तो यह शीर्षक बदलने का सबसे तेज़ तरीका होगा, लेकिन जब से आप jQuery को शामिल करना चाहते हैं:

किसी तत्व की title संपत्ति jQuery के साथ प्राप्त करें या सेट करें (v1.6 +)

गुण प्राप्त करने और सेट करने के लिए jQuery ने v1.6 में एक नई विधि शुरू की। titleकिसी तत्व पर गुण सेट करने के लिए , उपयोग करें:

$('#yourElementId').prop('title', 'your new title');

यदि आप शीर्षक को पुनः प्राप्त करना चाहते हैं, तो दूसरे पैरामीटर को छोड़ें और रिटर्न वैल्यू पर कब्जा करें:

var elementTitle = $('#yourElementId').prop('title');

JQuery के लिए prop()एपीआई प्रलेखन की जाँच करें ।

यदि आप वास्तव में गुणों का उपयोग नहीं करना चाहते हैं, या आप v1.6 से पहले jQuery के संस्करण का उपयोग कर रहे हैं, तो आपको इस पर पढ़ना चाहिए:

किसी तत्व की title विशेषता jQuery के साथ प्राप्त करें या सेट करें (संस्करण <1.6)

आप निम्नलिखित कोड के साथ title विशेषता को बदल सकते हैं :

$('#yourElementId').attr('title', 'your new title');

या इसे पुनः प्राप्त करें:

var elementTitle = $('#yourElementId').attr('title');

JQuery के लिए attr()एपीआई प्रलेखन की जाँच करें ।

Comments

यदि यह एक अच्छी तरह से निर्मित उत्तर नहीं है, तो कोई भी नहीं है। और यह उतना ही सटीक है जितना अच्छी तरह से बनाया गया है। +1 ... (ओह, और आपका नाम भी भयानक है, क्योंकि यह मेरा है: यहां तक ​​कि समान भी!)

— VoidKing

@VoidKing: मैं फिर से जाना जाता हूं और वर्तमान उत्तर बनाता हूं जो लोकप्रिय हो जाते हैं (जिनमें से मेरे पास केवल कुछ हैं)। मैं वह सब कुछ प्रदान करने की कोशिश करता हूं जो मुझे लगता है कि मैं शोध कर रहा हूं या एक प्रश्न पोस्ट कर रहा हूं। मुझे खुशी है कि आपने इसे पा लिया!

— C

@Cory खैर, जैसा कि मैं ईमानदारी से कुछ और देख रहा था (यह एक लंबा शॉट था, लेकिन यह देख रहा था कि क्या डिफ़ॉल्ट HTML शीर्षक बॉक्स को स्टाइल करने का कोई तरीका है)। मुझे वह नहीं मिला, जो मैं ढूंढ रहा था, लेकिन वास्तव में आपके द्वारा इस उत्तर में डाले गए प्रयास की प्रशंसा की गई (आपने संसाधन, शुद्ध .js और jQuery, आदि दिखाए)। वैसे भी, अच्छा जवाब!

— VoidKing

@VoidKing: यह उत्तर देने के लिए शायद गलत जगह है, लेकिन अगर आप डिफ़ॉल्ट टूलटिप्स के बारे में बात कर रहे हैं, जब आप ऑल्ट या शीर्षक विशेषताओं के साथ आइटम पर होवर करते हैं, तो शायद यह उत्तर आपको कुछ अंतर्दृष्टि देगा।

— C

@ कॉरी थैंक यू सर!

— VoidKing

Answer 2

Jquery ui मोडल संवादों में आपको इस निर्माण का उपयोग करने की आवश्यकता है:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );

Comments

Lifesaver !! ऊपर दिए गए मतदान उत्तर का उपयोग करते समय, शीर्षक को एक बार बदल दिया जाता है, फिर शीर्षक उसके बाद परिवर्तित नहीं होता है तब आप संवाद के भीतर शीर्षक विकल्प का उपयोग करते हैं !! धन्यवाद SOOOOOOO बहुत!

— रायन एलिस

मुझे खुशी है कि मैं टिप्पणियों को पढ़ता हूं ;-) यदि आपको कई बार शीर्षक बदलने की आवश्यकता है, तो आपको इसे संवाद विकल्पों में सेट करना होगा।

— मिशेल

कभी नहीं सोचा होगा कि यह कई बार स्वीकार किया जाएगा। मुझे बहुत खुशी है कि इसने :-)

— इगोर एल।

Answer 3

मेरा विश्वास है

$("#myElement").attr("title", "new title value")

या

$("#myElement").prop("title", "new title value")

करना चाहिए ट्रिक ...

मुझे लगता है कि आप jQuery डॉक्स में सभी मुख्य कार्य पा सकते हैं , हालांकि मुझे फ़ॉर्मेटिंग से नफरत है।

Answer 4

एक अन्य विकल्प, यदि आप चाहें, तो jQuery ऑब्जेक्ट से DOM तत्व प्राप्त करना और उस पर मानक DOM एक्सेसर्स का उपयोग करना होगा:

$("#myElement")[0].title = "new title value";

"JQuery रास्ता", जैसा कि दूसरों द्वारा उल्लेख किया गया है, attr () विधि का उपयोग करना है। Attr () के लिए एपीआई प्रलेखन यहाँ देखें ।

Answer 5

jqueryTitle({
    title: 'New Title'
});

पहले शीर्षक के लिए:

jqueryTitle('destroy');

https://github.com/ertaserdi/jQuery-Title

Comments

इस समस्या का हल स्वयं jquery पुस्तकालय का उपयोग करके किया जा सकता है। आपको केवल 3-पार्टी लाइब्रेरी का उपयोग करने का उल्लेख करना चाहिए जब ओपी इसका उल्लेख करता है, या इसे 3-पार्टी लाइब्रेरी का उपयोग किए बिना पूरा नहीं किया जा सकता है।

— अविषेक

हां, लेकिन अन्य विशेषताएं हैं। सरल लेकिन अच्छा समाधान ... आप जांच कर सकते हैं ...

— Erdi Ertaş

3-पार्टी लाइब्रेरी का एक http ट्रांसपोर्ट ओवरहेड होगा, जिसे स्टॉक / देशी तरीकों का उपयोग करके टाला जा सकता है।

— अविषेक

साथ ही, पहले से ही व्यापक रूप से स्वीकृत उत्तर है जो अधिक कुशल है।

— अविषेक

Answer 6

यदि आप एक बना रहे हैं divऔर उसमें एक जोड़ने की कोशिश कर रहे हैं title।

प्रयत्न

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');

Answer 7

@ Cᴏʀʏ उत्तर के अतिरिक्त, सुनिश्चित करें कि टूलटिप का शीर्षक पहले से ही HTML तत्व में मैन्युअल रूप से सेट नहीं किया गया है। मेरे मामले में, टूलटिप के लिए स्पैन क्लास में पहले से ही एक तयशुदा पाठ था, इस वजह से मेरे JQuery फ़ंक्शन $('[data-toggle="tooltip"]').prop('title', 'your new title');ने काम नहीं किया।

जब मैंने HTML स्पैन क्लास में शीर्षक विशेषता को हटा दिया, तो jQuery काम कर रहा था।

इसलिए:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>

चाहिए:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>