如何在JQuery中隱藏相同級別的分區？

Question

我很新，因爲我主要是後端JQuery。所以我有一個是這樣的一個表：

<tr> 
<td> 
    <div class="div-package-service"><a style="cursor: pointer" id="service_"+id+" class="package-service"> Service Name </a></div>     
    <span><br>ANYTIME</span> 
    <div><br><a style="cursor: pointer" class="remove-button">Remove></a></div> 
</td> 

的排輩是循環的，因此在服務ID id變量。現在我想隱藏「分區包服務」，我用這jQuery代碼：

var hideSchedule = { 
    removeServiceSchedule: function (span) { 
     $(span).siblings().find('div').hide(); 
    } 
} 

$(document).on('click', '.remove-button', function (e) { 
    e.preventDefault(); 
    hideSchedule.removeServiceSchedule(this); 
});  

我嘗試了各種方法，但我還是不明白這一點。我可以在我的系統的其他部分做到這一點，但我不能在這裏做。感謝幫助！

Answer 1

有幾件事情：

1. 爲指向的Özgür的Ersil，不能正常產生的元素的ID。 它應該是這樣的：id="service_"+id

2. 你已經寫了一個觸發器：.package-service-remove並沒有這樣的類在HTML（AT-至少不是在一個張貼）。

3. 如果您的意思是remove-button刪除服務名稱，然後，刪除按鈕是在一個div，所以它沒有服務名稱的div作爲其兄弟。其母公司有服務名格爲兄弟，通知：$(span).parent().siblings('div')在下面的代碼

var hideSchedule = { 
 
    removeServiceSchedule: function (span) { 
 
     $(span).parent().siblings('div').hide(); 
 
    } 
 
} 
 

 
$(document).on('click', '.remove-button', function (e) { 
 
    e.preventDefault(); 
 
    hideSchedule.removeServiceSchedule(this); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="1"> 
 
<tr> 
 
<td> 
 
    <div class="div-package-service"><a style="cursor: pointer" id="service_1" class="package-service"> Service Name </a></div>  
 
    <span><br>ANYTIME</span> 
 
    <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td> 
 
    <div class="div-package-service"><a style="cursor: pointer" id="service_2" class="package-service"> Service Name </a></div>     
 
    <span><br>ANYTIME</span> 
 
    <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div> 
 
</td> 
 
</tr> 
 
</table>

---

而下面的代碼刪除（隱藏）整行）

var hideSchedule = { 
 
    removeServiceSchedule: function(span) { 
 
    $(span).parents("tr").hide(); 
 
    } 
 
} 
 

 
$(document).on('click', '.remove-button', function(e) { 
 
    e.preventDefault(); 
 
    hideSchedule.removeServiceSchedule(this); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="1"> 
 
    <tr> 
 
    <td> 
 
     <div class="div-package-service"><a style="cursor: pointer" id="service_1" class="package-service"> Service Name 1</a></div> 
 
     <span><br>ANYTIME</span> 
 
     <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="div-package-service"><a style="cursor: pointer" id="service_2" class="package-service"> Service Name 2</a></div> 
 
     <span><br>ANYTIME</span> 
 
     <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="div-package-service"><a style="cursor: pointer" id="service_3" class="package-service"> Service Name 3</a></div> 
 
     <span><br>ANYTIME</span> 
 
     <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div> 
 
    </td> 
 
    </tr> 
 
</table>