Question

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

我需要这样做而不需要/知道可能溢出的元素 - 只是其他元素溢出到当前单元格

下方的片段（忽略不同的宽度）

＆＃13;

$.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
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

所以在我在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;
}

Answer 2

检查另一个元素的宽度是否大于其父元素...

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

2 个答案: