javascript - jquery 中包含另一个溢出元素的元素

Question

我需要查看 jQuery 中的元素是否包含另一个溢出元素。

我需要在不引用/知道可能溢出到其中的元素的情况下执行此操作 - 只是某些其他元素溢出到当前单元格

下面的片段(忽略不同的宽度)

$.fn.exists = function () {
    return this.length !== 0;
}

$( document ).ready(function() {
  var $element = $('td#append');
  var do_spans_exist = $('span', $element).exists();
  if ( do_spans_exist == true );
    //change top position
  add_html = $('td#append').append('<span class="span1"></span>'); //and have some top position attribute
});
  

.table1 {
	border:1px solid navy;
	width: 70%;
	text-align: center;
}
.table1 td {
	width: 100px;
	height: 100px;
	vertical-align: top;
	text-align: right;
	border: 1px solid #c6c6ec;
	position: relative;
  left: 0;
  position: relative;
}
.span1 {
  display: inline-block;
  width: 300px;
  height: 30px;
  background-color: blue;
  z-index: 1;
  position:absolute; 
  border: solid black 1px;
}
div {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
  <table class="table1">
    <tr>
      <td><span class="span1"></span></td>
      <td id="append"></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

因此，在 jQuery 中附加 span 之前，我想了解是否有任何其他 span 元素溢出到单元格中。所以我可以改变位置以避免重叠。

我的exists()函数仅获取物理上位于单元格中的跨度，而不是溢出到其中。

谢谢!

Answer 1

尝试这个CSS，不要使用你的.table1，你会得到结果

.table1 td {
    width: 100px;
    height: 100px;
    vertical-align: top;
    border: 1px solid #c6c6ec;
    position: relative;
    left: 0;
    position: relative
}
.span1 {
  display: inline-block;
  width: 418px;
  height: 30px;
  background-color: blue;
  z-index: 1;
  position:absolute; 
  border: solid black 1px;
}