मेरे पास एक div तत्व है और मैं इसे होवर पर एक आइकन जोड़ना चाहता हूं लेकिन jQuery केवल आइकन जोड़ता है यदि div खाली नहीं है और कुछ भी नहीं होता है।

$('div #tags').hover(function() {
  $(this).append('<p>+</p>')
}, function() {
  $(this).find("p").last().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
  <p>The div isn't empty</p>
</div>
0
alex3025 29 अक्टूबर 2019, 17:16
2
क्या आपका मतलब सिर्फ $('#tags') था? $('div #tags') tags की आईडी के साथ एक तत्व का चयन करता है जो एक div का वंशज है, लेकिन वह HTML नहीं है जिसे आपने पोस्ट किया है।
 – 
j08691
29 अक्टूबर 2019, 17:18
1
अस्पष्ट आप क्या कह रहे हैं। क्या आप कह रहे हैं कि यह काम नहीं करता है अगर वह

तत्व नहीं है?

 – 
epascarello
29 अक्टूबर 2019, 17:19
3
आपको शायद इसके लिए CSS का उपयोग करना चाहिए, लेकिन यह भी कि दूसरे लोग क्या कह रहे हैं
 – 
GammaGames
29 अक्टूबर 2019, 17:20
केवल $('#tags') के साथ यह काम नहीं करता है, भले ही div के अंदर तत्व हों।
 – 
alex3025
29 अक्टूबर 2019, 17:26
क्या आपके पास फ़ॉन्ट भयानक संदर्भित है?
 – 
epascarello
29 अक्टूबर 2019, 17:32

3 जवाब

$('div #tags') आपके मामले में आपके <div> के लिए गलत चयन है। आपने जो किया उसका मतलब है कि jQuery <div> के अंदर #tags की आईडी वाले तत्व की तलाश कर रहा है। इसके बजाय, आपको इसे $('#tags') बनाना होगा।

1
War10ck 29 अक्टूबर 2019, 17:23
$('div #tags') के बिना यह संलग्न नहीं होता, भले ही div खाली न हो
 – 
alex3025
29 अक्टूबर 2019, 17:30

<div> और <p> तत्वों की ऊंचाई और चौड़ाई डिफ़ॉल्ट रूप से 0 है, इसलिए आपका होवर प्रभाव उत्पन्न नहीं होगा (आप तत्व पर होवर नहीं कर सकते):

<div id="tags"><p></p></div>

यदि आप तत्व के अंदर कुछ पाठ लिखते हैं तो चौड़ाई और ऊंचाई बदल जाएगी और आप होवर प्रभाव उत्पन्न करने में सक्षम होंगे:

<div id="tags"><p>Not empty</p></div>

इसलिए <i> संलग्न नहीं होता अगर div या p तत्व खाली हैं

0
War10ck 29 अक्टूबर 2019, 17:43

चूंकि div और id एक ही तत्व को संदर्भित करते हैं, इसलिए आपके बीच चयनकर्ता में कोई स्थान नहीं होना चाहिए।

कृपया ध्यान दें: चूंकि id विशेषता अद्वितीय है, बस $('#tags') तत्व को लक्षित करने के लिए पर्याप्त सुरक्षित है।

$('#tags').hover(function() {
  $(this).append('<i class="fa fa-plus-circle ml-1 add-tag-icon"></i>')
}, function() {
  $(this).find("i").last().remove();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
    <p>The div isn't empty</p>
</div>

jQuery आइकन तभी जोड़ता है जब div खाली न हो और कुछ नहीं होता।

यदि डिव खाली है तो उस पृष्ठ में कुछ भी नहीं है जिस पर आप होवर कर सकते हैं। कृपया निम्नलिखित उदाहरण देखें:

$('#tags').hover(function() {
  $(this).append('<p>+</p>')
}, function() {
  $(this).find("p").last().remove();
});
#tags{
  width: 100px;
  height: 15px;
  background-color: lightgray;
  border: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
  
</div>
2
Mamun 29 अक्टूबर 2019, 17:56
2
यह ध्यान दिया जाना चाहिए कि div#tags, #tags से अधिक कोई लाभ प्रदान नहीं करता है। यह सीएसएस प्राथमिकता के मामले में थोड़ा अधिक है, लेकिन यह केवल तभी मायने रखता है जब पृष्ठ पर id tags के साथ भी कोई अन्य तत्व था (जो कि id के बाद से ऐसा नहीं होना चाहिए। अद्वितीय होना चाहिए)।
 – 
War10ck
29 अक्टूबर 2019, 17:25
यह ओपी के हिस्से पर एक टाइपो प्रतीत होता है, जो आम तौर पर कुछ ऐसा होता है जिसके लिए हम एक प्रश्न बंद करते हैं ...
 – 
Heretic Monkey
29 अक्टूबर 2019, 17:30
केवल $('#tags') के साथ यह काम नहीं करता है, भले ही div के अंदर तत्व हों।
 – 
alex3025
29 अक्टूबर 2019, 17:32
@alex3025, id विशेषता div#tags और #tags की विशिष्टता के कारण मूल रूप से एक ही चीज़ है। वहाँ व्यवहार में कोई अंतर नहीं होना चाहिए :)
 – 
Mamun
29 अक्टूबर 2019, 17:39
मुझे पता है लेकिन यह वैसे भी काम नहीं करता है।
 – 
alex3025
29 अक्टूबर 2019, 17:40