jQuery冲突-如果任何标签重叠

Question

我为每个块创建了标签，该标签应显示在该块的左上方。如果标签彼此重叠，则必须将重叠的标签向上移动34px。

仅当标签重叠时才必须发生

PS 内容是动态变化的，因此我无权添加任何可通过CSS实现的类或ID：（

  

HTML：

<div class="main-div">

  <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x150">
    <div class="resTotalClicksDiv">label</div>
  </div>
  <br><br><br>
    <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x50">
    <div class="resTotalClicksDiv">label</div>
  </div>

<br><br><br>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-20.png">
    <div class="resTotalClicksDiv">Facebook</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-20.png">
    <div class="resTotalClicksDiv">Twitter</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-20.png">
    <div class="resTotalClicksDiv">Linkedin</div>
  </div>

</div>

  

CSS：

body{margin:50px auto;}
.main-div{width:400px;margin:auto;border:1px solid #ccc;font-family:verdana;font-size:13px;padding:30px 20px 10px 20px;background:#f5f5f5;}
.hrefOverlay{position:relative;display:inline-block;}
.resTotalClicksDiv{position:absolute;top: -25px;left:0;background-color: #eac0c0;padding: 5px;font-size: 12px;border:1px solid red;}
.resTotalClicksDiv:before {content: "";display: block;background: red;width: 1px;height: 20px;float: left;margin: 0;position: absolute;left: -1px;top: 0px;height: 34px;}

  

jQuery

var newStyle = document.createElement('style');             

$('.hrefOverlay').find('.resTotalClicksDiv').each(function(i) {
  $(this).addClass('resTotalClicksDiv-'+i);
  $(this).css('top', -(i+1)*22 + 'px')
  newStyle.appendChild(document.createTextNode(".resTotalClicksDiv-"+i+":before{height:"+(34+(i)*22)+"px;}"));
    document.head.appendChild(newStyle);

});

感谢@Haresh Vidja提供的jQuery解决方案

我得到的是：Fiddle

  

来自

  

收件人

所需结果：

Answer 1

这是带有所需输出的更新的小提琴。使用特定于每个按钮的Jquery添加类，然后更改CSS

$(window).load(function(){
	$(".hrefOverlay").each(function(){
  	var eleText = $(this).find(".resTotalClicksDiv").text().toLowerCase();
    if(eleText == "facebook"){
				$(this).find(".resTotalClicksDiv").addClass("fw");
        }
        else if(eleText == "twitter"){
        $(this).find(".resTotalClicksDiv").addClass("tw");
        }
        else if(eleText == "linkedin"){
        $(this).find(".resTotalClicksDiv").addClass("ln");
        }
  });
});

body{margin:50px auto;}
.main-div{width:400px;margin:auto;border:1px solid #ccc;font-family:verdana;font-size:13px;padding:30px 20px 10px 20px;background:#f5f5f5;}


.hrefOverlay{position:relative;display:inline-block;}
.resTotalClicksDiv{position:absolute;top: -25px;left:0;background-color: #eac0c0;padding: 5px;font-size: 12px;border:1px solid red;}
.resTotalClicksDiv:before {content: "";display: block;background: red;width: 1px;height: 20px;float: left;margin: 0;position: absolute;left: -1px;top: 0px;height: 34px;}
.resTotalClicksDiv.tw{
  top:-50px;
}

.resTotalClicksDiv.tw:before{
height:60px;
    content: "";
}
.resTotalClicksDiv.ln{
  top:-76px;
}

.resTotalClicksDiv.ln:before{
height:80px;
    content: "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-div">

  <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x150">
    <div class="resTotalClicksDiv">label</div>
  </div>
  <br><br><br>
    <div class="hrefOverlay">
    <img src="http://via.placeholder.com/400x50">
    <div class="resTotalClicksDiv">label</div>
  </div>
  
<br><br><br>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-20.png">
    <div class="resTotalClicksDiv">Facebook</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-20.png">
    <div class="resTotalClicksDiv">Twitter</div>
  </div>

  <div class="hrefOverlay">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-20.png">
    <div class="resTotalClicksDiv">Linkedin</div>
  </div>
  
</div>