Question

我有以下jQuery，找到ASP.NET服务器控件（通过在块中放置alert（）进行测试），但是它没有在DOM中的下一个DIV上设置高度使用.next（）。但是，如果我使用直接JS来做同样的事情，直接通过ID调用DIV它可以正常工作。

我想要做的就是不使用DIV的硬编码ID，以防它发生变化，而是使用DOM来动态获取元素并设置高度。

所以第一：我试图操纵的HTML源代码：

<div id="WebViewer" style="height:100%;width:100%;margin-right: 0px">
   <input name="WebViewerReportReceipt" type="hidden"/>
   <input name="WebViewerViewerType" type="hidden"/>
   <DIV id="WebViewer_controlDiv">
    <iframe src="295769102_1619997395_16141400_2120403583/CacheItem" style="width:100%;height:100%;"></iframe>
   </DIV>
</div>

接下来我认为应该工作的非工作jQuery：

//Using the 'DIV' that is created by the viewer (at runtime), resize it dynamically to fit the window
    var myHeight = $(window).height();
    if ($('#<%=WebViewer.ClientID %>') != null) {                
          $('#<%=WebViewer.ClientID %>').next('div').height(myHeight - 10);
    }

最后，做的JS工作，但我宁愿不通过硬编码ID访问该DIV，而是使用jQuery：

var myHeight = $(window).height();
//Using the 'DIV' that is created by the viewer (at runtime), resize it dynamically to fit the window
if (document.getElementById('WebViewer_controlDiv') != null) {
    document.getElementById('WebViewer_controlDiv').style.height = myHeight - 10;
}

为什么在jQuery中使用DOM来获取'下一个'div并设置其高度的任何想法都不起作用？

谢谢！

Answer 1

就HTML而言，它可能是“下一个”，但就DOM而言，它不是“下一个”。相反，它是孩子。

你可能想要这样的东西：

$(element).find('div:first');

但请注意，您的代码存在一些问题。例如，这将始终通过：

if ($('#<%=WebViewer.ClientID %>') != null) {

您需要检查选择的length属性，因为即使是空的jQuery选择也会计算为布尔值true。

Answer 2

jQuery的.next（）选择器获得了下一个兄弟，但我不认为你想要那个。您需要'parent > child' selector，例如

$('#<%=WebViewer.ClientID %>' > 'div').height(myHeight - 10);

Answer 3

我猜你的if语句中的$('#<%=WebViewer.ClientID %>')是指<div id="WebViewer"？

如果是这样，next()将无效，因为它会查找下一个兄弟，而不是下一个孩子

所以尝试这样的事情：

var myHeight = $(window).height();
if ($('#<%=WebViewer.ClientID %> div:first').length) {                
      $('#<%=WebViewer.ClientID %> div:first').height(myHeight - 10);
}

这是一个带有正在运行的代码的jsfiddle（在此上下文中稍作修改）： http://jsfiddle.net/xT7rx/

您应该使用 .length 来检查元素是否存在，而不是 != null

为什么在我的jQuery中使用下一个'div'不起作用？

3 个答案: