Question

请看这个图库 image-gallery-with-vertical-thumbnail.slider

如果你查看页面来源，你可以看到类似这样的内容

<div data-u="slides" style="cursor: default; position: absolute; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden; z-index: 0;"><div style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px; display: none;"></div></div><div data-u="slides" style="cursor: default; position: absolute; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden; z-index: 0;">
                <div style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute; opacity: 0; display: none; background-color: rgb(0, 0, 0);"></div>
                <div data-p="150.00" style="width: 720px; height: 480px; top: 0px; left: -720px; position: absolute; overflow: hidden; perspective: 150px;">
                    <img data-u="image" src="/demos/img/travel/01.jpg" border="0" style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute;">
                    <img data-u="thumb" src="/demos/img/travel/thumb-01.jpg" style="display: none;">
                    <div data-u="loading" style="position: absolute; top: 0px; left: 0px; width: 720px; height: 480px; z-index: 1000; display: none;">
                        <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
                        <div style="position: absolute; display: block; background: url(/theme/img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
                    </div>
                </div>
                <div data-p="150.00" style="width: 720px; height: 480px; top: 0px; left: -720px; position: absolute; overflow: hidden; perspective: 150px;">
                    <img data-u="image" src="/demos/img/travel/02.jpg" border="0" style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute;">
                    <img data-u="thumb" src="/demos/img/travel/thumb-02.jpg" style="display: none;">
                    <div data-u="loading" style="position: absolute; top: 0px; left: 0px; width: 720px; height: 480px; z-index: 1000; display: none;">
                        <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
                        <div style="position: absolute; display: block; background: url(/theme/img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
                    </div>
                </div>

但如果你使用谷歌浏览器检查页面，你可以看到

<div style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute; opacity: 0; display: none; background-color: rgb(0, 0, 0);"></div>

你可以看到动态生成的第二行（第一个数据属性为150.00之前的行）

{{1}}

我需要在此div中添加一个类，但我无法找到它生成的位置

请帮助找到并添加一个课程！

Answer 1

你可以简单地使用jquery来选择div并添加类

$('div[data-u="slides"]').children(":first").addClass('my-Class');

这会将my-Class添加到

<div style="width: 720px; height: 480px; top: 0px; left: 0px; position: absolute; opacity: 0; display: none; background-color: rgb(0, 0, 0);"></div>

这个div

无法找到div生成的位置

1 个答案: