通过jQuery控制CSS边框

Question

我正在尝试为div 添加边框，但最后里面还有其他div。 我想结束边界，直到特定的div。示例代码如下。将无法编辑实际模板，所以我正在寻找一个 jQuery/CSS 解决方案来解决这个问题。使用特定的CSS类添加边框是一种选择，但不是一个完美的解决方案，因为部分之间会有间隙并且缺少边框。

$(".article-content")
  .css("border", "2px red solid")
  .find("#beforeFooter")
  .end();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="article-content">
  <div class="article-title">Title</div>
  <div class="article-share">Share tools</div>
  <p><span>Hello</span>, how are you?</p>
  <p><span>Hello</span>, your name?</p>
  <p><span>Hello</span>, your age?</p>
  <p>Ends here</p>
  <div id="beforeFooter"><img src="https://via.placeholder.com/600x150" /></div>
  <div class="article-footer">Some other footer content</div>
</div>

Answer 1

一种选择是获取#beforeFooter元素的偏移量（它从.article-content元素顶部偏移的像素数），然后将.article-content的高度设置为该偏移量。

var beforeFooterPosition = $("#beforeFooter").position();
$(".article-content").height(beforeFooterPosition.top);

这是工作示例。我必须再减去 18 个像素才能使边框位于正确的位置。您需要尝试该数字以获得所需的效果。

var beforeFooter = $("#beforeFooter").position();
$(".article-content").height(beforeFooter.top - 18);

.article-content {
  border: 2px solid red;
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="article-content">
  <div class="article-title">Title</div>
  <div class="article-share">Share tools</div>
  <p><span>Hello</span>, how are you?</p>
  <p><span>Hello</span>, your name?</p>
  <p><span>Hello</span>, your age?</p>
  <p>Ends here</p>
  <div id="beforeFooter"><img src="https://via.placeholder.com/600x150" /></div>
  <div class="article-footer">Some other footer content</div>
</div>