我有一个简单的需求 - 我想响应地渲染一个div，我后来需要使用JavaScript来操作它。请考虑以下代码：
<div id="test" class="visible-lg-block visible-md-block visible-sm-block>Large Viewport</div>
<div id="test" class="visible-xs-block">Small Viewport</div>
请注意：上面div中的示例文本不是我的实际案例。我的实际案例包括每个div中的JQuery UI控件，如下所示：
<div id="test" class="visible-lg-block visible-md-block visible-sm-block>[[JQUERY CONTROL]]</div>
<div id="test" class="visible-xs-block">[[JQUERY CONTROL]]</div>
我使用JQuery在JQUERY控件上设置属性，当视口为“xs”而不是“sm”，“md”或“lg”时，这些属性必须略有不同。
这很有效：当我以1024x768显示浏览器时，我看到“大视口”;当我将浏览器减少到640x960时，我看到“Small Viewport”。问题是两个标签总是出现在渲染的DOM上，并且都具有ID属性值“test”。我在Javascript中使用该唯一ID来查找Div标记 - 现在我的JavaScript会看到其中的两个。
如何解决这个问题 - 要么为每个DIV设置一个唯一的ID，要么以某种方式让“隐藏的”DIV完全不渲染？理想情况下，我想要一个仅使用Bootstrap功能的解决方案（我相对较新），而不是需要JavaScript或JQuery的解决方案。
如果我必须使用JS / JQuery，那么确定标签是否由Bootstrap呈现的最佳方法是什么？我真的不想使用媒体查询或尝试自己确定视口大小，因为最终我希望Bootstrap拥有关于div是否被渲染的“决策权” - 我只想要知道Bootstrap决定了什么，然后根据需要与可见的div进行交互。
谢谢。
答案 0 :(得分：0)
感谢您的澄清。
最简单的解决方案可能只是使用class而不是ID，或者为它们提供不同的ID，只需将Javascript应用于两者，即使其中一个是不可见的。
如果这是不可能的，由于你的jQuery UI控制器正在做的事情不应该对隐藏的div进行，那么考虑给它们两个相同的类（例如mytestclass）和使用以下方法选择可见的：
$('.mytestclass:visible')
作为你的选择器。这只会选择布局中currently has a width or height的那个，而Bootstrap隐藏的那个不会（由于display: none; Bootstrap提供它。）
但不要忘记，如果视口宽度稍后更改（浏览器调整大小，移动旋转，无论如何），您可能需要侦听此事件并将代码重新应用于新显示的div。
这听起来像是适用于您的场景的东西吗？