Fatal编程技术网
  • jquery/
  • Jquery 覆盖不会覆盖动态添加的元素

Jquery 覆盖不会覆盖动态添加的元素

jquery html css

Jquery 覆盖不会覆盖动态添加的元素,jquery,html,css,Jquery,Html,Css,问题背景： <div class="row"> <div class="col-lg-12 text-center"> <ul id="pagination-demo"></ul> </div> </div> </div> </div> 我有一个MVC应用程序，它的数据通过jQue

问题背景：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
我有一个MVC应用程序，它的数据通过jQuery呈现，然后附加到apps视图中的一个空div中。覆盖将附着到包含这些元素的div，并应覆盖所有视图

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
问题：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
我可以添加一个覆盖，它在视图中进行渲染，但是通过jQuery生成的元素没有被覆盖，它们位于覆盖的顶部，如图所示，而不是覆盖的下面

.overlay{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}

.overlay .container,
.overlay .itemHolder  /*Just added temporary, you cna remove this */
{
  opacity: 0 !important;
}

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>


        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
可以看到，覆盖层正在渲染（用灰色表示），但元素位于其顶部

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
代码：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
覆盖样式：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
将项目附加到其中的覆盖容器：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
用于将覆盖类添加到myNav的代码：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
如果您只是更改容器元素的样式，它将不起作用。正如塔普拉所说，孩子们将永远是最重要的。您应该做的是创建另一个用作覆盖层的元素，将其预先添加到容器中，为其提供100%的绝对位置、宽度和高度以及足够高的z索引。这将在元素上创建一个覆盖，从而覆盖您动态添加的子元素。

如果您只是更改容器元素的样式，它将不起作用。正如塔普拉所说，孩子们将永远是最重要的。您应该做的是创建另一个用作覆盖层的元素，将其预先添加到容器中，为其提供100%的绝对位置、宽度和高度以及足够高的z索引。这将在元素上创建一个覆盖，从而覆盖动态添加的子元素。

尝试此CSS：

.overlay{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}

.overlay .container,
.overlay .itemHolder  /*Just added temporary, you cna remove this */
{
  opacity: 0 !important;
}

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
试试这个CSS：

.overlay{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}

.overlay .container,
.overlay .itemHolder  /*Just added temporary, you cna remove this */
{
  opacity: 0 !important;
}

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
如果我没弄错的话，你希望覆盖层覆盖产品

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
在这种情况下，您将需要创建一个单独的元素，而不仅仅是向包含产品的元素添加一个类

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
大概是这样的：

<div id="myNav">
   ...
</div>

<div id="overlay">
   ...
</div>

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
如果我没弄错的话，你希望覆盖层覆盖产品

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
在这种情况下，您将需要创建一个单独的元素，而不仅仅是向包含产品的元素添加一个类

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
大概是这样的：

<div id="myNav">
   ...
</div>

<div id="overlay">
   ...
</div>

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
您需要解析文本。我以前做过类似的事情，但样式不应用于生成的元素。解决方案是创建如下元素：

var elem = document.createElement('div');
elem.className = 'col-lg-4';
elem.innerHTML = '' + yourText;
container.appendChild(elem);

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
如果这对您不起作用，请告诉我，我将尝试搜索HTMLPasser脚本

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
编辑：您甚至可以尝试
innerHTML
而不是
appendChild
文本。

您需要解析文本。我以前做过类似的事情，但样式不应用于生成的元素。解决方案是创建如下元素：

var elem = document.createElement('div');
elem.className = 'col-lg-4';
elem.innerHTML = '' + yourText;
container.appendChild(elem);

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
如果这对您不起作用，请告诉我，我将尝试搜索HTMLPasser脚本

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
编辑：您甚至可以尝试
innerHTML
而不是
appendChild
文本。

您的问题是，您生成的元素是
的子元素。子项将始终具有与您的
相同的z索引

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
对于生成的元素，您必须将
旁边的
放在相同的层次结构级别上，z索引高于
div
。为了实现这一点，我在下面更改了您的代码

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
HTML: 

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
每次要淡入淡出覆盖时，都可以使用jQuery：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
jQuery：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>

$(".overlay").fadeIn(500) //500 means 500ms = 0.5 seconds
$(".overlay").fadeOut(500)
如果要在覆盖图上显示某些内容，只需将子元素添加到

您的问题是，生成的元素是
的子元素。子项将始终具有与您的
相同的z索引

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
对于生成的元素，您必须将
旁边的
放在相同的层次结构级别上，z索引高于
div
。为了实现这一点，我在下面更改了您的代码

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
HTML: 

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
每次要淡入淡出覆盖时，都可以使用jQuery：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>
jQuery：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>

$(".overlay").fadeIn(500) //500 means 500ms = 0.5 seconds
$(".overlay").fadeOut(500)
如果您想在覆盖图上显示某些内容，只需将子项添加到

您的“itemHolder”是“myNav”的子项。为什么它不在导航的顶部呢？你们的“物品持有者”是“我的导航”的孩子。为什么它不在导航的顶部呢？ 
        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>