时间戳

首页 > 解决方案 > 如何定位单击的 div 元素内的特定跨度？

javascript - 如何定位单击的 div 元素内的特定跨度？

问题描述

我已经尝试了一些方法来隐藏 div ".text-body" 中的跨度，但似乎无法使其工作。以下是我尝试过的一种方法。如何仅在单击的元素内隐藏带有“badge badge-danger-lighten”类的跨度？

$('.text-body').click(function(e){

if($(this).children('div').hasClass('media bg-light p-2'))
{
    // do something
}
else
{
    $('div.media.bg-light.p-2').addClass('mt-1 p-2').removeClass('bg-light')
    $(e).find("span.w-25.float-right.text-right").hide(); //trying to hide span here
    $(this).children('div').addClass("media bg-light p-2");





<a href="javascript:void(0);" class="text-body"><div class="media mt-1 p-2">
  <img src="/static/assets/images/users/avatar-2.jpg" class="mr-2 rounded-circle" height="48"alt="Brandon Smith" />
  <div class="media-body">
     <h5 class="mt-0 mb-0 font-14">
        <span class="float-right text-muted font-12">4:30am</span>
        Brandon Smith
     </h5>
     <p class="mt-1 mb-0 text-muted font-14">
        <span class="w-25 float-right text-right">**<span class="badge badge-danger-lighten">3</span></span>** 
        <span class="w-75">How are you today?</span></p></div></div></a>

标签： javascripthtmljquery

解决方案

只是一个简单的说明，find如果目标元素不是直接子元素，您可以如何使用

$('.text-body').click(function(e){
//this will look for any element with a class badge and badge-danger-lighten
$(this).find('.badge.badge-danger-lighten').hide()
})
.text-body{
border:1px solid;
}
<div class="text-body">
  <span class="badge badge-danger-lighten">Target Span</span>
  <br>
  <span>Another Span</span>
  <div>
   <span class="badge badge-danger-lighten">Another Target Span/ deeply situated</span>
  </div>
</div>

<br>
<br>

Click the rectangle above

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

推荐阅读