पार बटन को पार करने वाली

Question

मैं नव jQuery और जावा स्क्रिप्ट सीख रहा हूँ, वर्तमान में मैं छिपा बटन दिखाने में एक समस्या का सामना करना पड़ रहा है, मेरे एचटीएमएल

<span style="float:left;padding-right:10px"> 
    <input type="button" value="image" class="delete" /> 
    <a href="/media/image"><img src="/media/image" /></a> 
</span> 
<span style="float: left; padding-top: 5px;"> 
    <a href="/media/image"> 
     <button type="submit" class="delete_media">Delete</button> 
    </a> 
</span> 

है Jquery:

$(".delete").click(function(){   
var $this = $(this); 
$this.siblings(".delete_media").toggle();    
}); 

सीएसएस :

.delete_media {  
    display:none; 
    float: right; 
    height: 25px; 
    width: 60px; 
    -moz-border-radius: 10px; 
    border-radius:10px;  
} 

इसके अलावा मैं का उपयोग कर, nextAll, करीबी भी कुछ नहीं तो काम किया यह काम करने के लिए कैसे की कोशिश की।

डेमो Here

Answer 1

इस

$this.closest('span').next().find(".delete_media").toggle(); 

DEMO

Answer 2

आप भाई-बहनों का उपयोग कर रहे हैं, लेकिन वे एक ही कंटेनर पर नहीं कर रहे हैं। अन्य ट्रैवर्सिंग फ़ंक्शन नौकरी भी नहीं करेगा क्योंकि उन दो बटनों में एक सामान्य कंटेनर नहीं है।

बस वर्ग

$(".delete").click(function(){   
    var $this = $(this); 
    $(".delete_media").toggle();    
}); 

यह है कि आप एक आम कंटेनर के साथ उन दो बटन लपेट देंगे सलाह दी जाती है के द्वारा यह खोज करते हैं।

यहाँ एक उदाहरण है

<div data-action="delete"> 
    <span style="float:left;padding-right:10px"> 
     <input type="button" value="image" class="delete" /> 
     <a href="/media/image"><img src="/media/image" /></a> 
    </span> 
    <span style="float: left; padding-top: 5px;"> 
     <a href="/media/image"> 
      <button type="submit" class="delete_media">Delete</button> 
     </a> 
    </span> 
</div> 

$(".delete").click(function(){   
    var $this = $(this); 
    $this.closest("div[data-action='delete']") 
          .find(".delete_media").toggle();    
});