如何在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>