开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery masonry:nth-child()不起作用？

jquery masonry:nth-child()是一个用于选择和操作HTML元素的jQuery选择器。它可以用于选择masonry布局中的特定元素，并对其进行样式或其他操作。

然而，当使用jquery masonry:nth-child()时，可能会出现不起作用的情况。这可能是由于以下几个原因：

选择器语法错误：请确保选择器语法正确，包括正确的选择器名称和正确的选择器参数。例如，正确的选择器语法是：$("选择器名称:选择器参数")。
元素未正确匹配：请确保选择器参数能够正确匹配到要操作的元素。可能是由于选择器参数不正确或没有匹配到任何元素导致的。
元素尚未加载：如果在DOM加载完成之前尝试操作元素，选择器可能无法找到任何匹配的元素。请确保在DOM加载完成后再执行相关操作，可以使用$(document).ready()函数来确保DOM加载完成。
Masonry插件未正确初始化：如果使用jquery masonry插件，需要确保正确初始化该插件。请检查是否正确引入了masonry插件文件，并在DOM加载完成后调用相关初始化函数。

综上所述，如果jquery masonry:nth-child()不起作用，可以按照上述步骤逐一排查可能的原因，并进行相应的修正。如果问题仍然存在，建议查阅相关文档或寻求社区支持以获取更详细的帮助。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动应用开发平台（MPS）：https://cloud.tencent.com/product/mps
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙解决方案：https://cloud.tencent.com/solution/metaverse

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS3---first-child或者nth-child(1) 不起作用的原因

一、零碎 1、first-child、last-child、nth-child(n)、nth-child(2n)、nth-child(2n-1)、nth-child(odd)、nth-child...(even)、nth-last-child(3)（倒数第三个）注意点：选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 ... 2、其次找到父类下的第n个子元素 3、最后看该子元素是不是1中的伪类调用者，如果是，则应用css，否则不应用 ----》有时候first-child...或者nth-child(1) 不起作用的原因 /*此时first-child不起作用，是因为.tap_con的父元素win的第一个子元素是.top，此时找到第一个子元素，但是其并不是.tab_con*/... ========================================================== .tab_con:first-child

2.8K5 0

Vue 中使用 JQuery 插件不起作用

有时候在 vue 的代码中使用 jQuery 会不起作用，这是因为 vue 还没有绑定变量，所以我们使用的 jQuery 根本就找不到目标变量，就不会执行，正确的做法是先设置一个时延，稍微等一等 vue

2.2K3 1

jQuery:delegate中select()不起作用的解决方法

jQuery有一个很好用的delegate(事件委派)功能，可以给当前以及将来(动态添加)的元素绑定一个事件处理函数。...> delegate测试 *{padding:0;margin:0;list-style:none;margin:5px}...function(){ $(this).val($(this).val().toUpperCase()).select(); }); }) 但是实际测下来，.select()死活就是不起作用

2.8K5 0

WordPress中的jQuery库不起作用的相关问题

如果仅仅加载WordPress 自带的jQuery 库，在使用一些jQuery 插件的时候明明是代码没有错误，但就是不起作用，该有的效果不能实现；但加载了原版的jQuery 库却又可以了，这样一来却同时加载了两个...后来才了解到：为了防止与其他 JS 库（如 YUI）冲突，WordPress 内置 jQuery 库的末尾都在原版的基础上加入了 jQuery.noConflict()这个东东，以至于在jQuery 代码中用...$ 代替jQuery 的写法不能识别，一些功能不起作用的原因正是由此而来。...jQuery 库。...jquery.js”为关键词查找，在第127行能找到这么一句（以WordPress 3.5.1为例）： $scripts->add( 'jquery', '/wp-includes/js/jquery/

4K6 0

5 种瀑布流场景的实现原理解析

columnCount }, () => ({ height: 0, children: [], })) React.Children.forEach(children, (child...: React.ReactNode, index) => { if (child && React.isValidElement(child)) { if (index < columns.length...) { columns[index % columnCount].children.push(child) columns[index % columnCount].height...+= child.props.height return } const minHeightColumn = minBy(columns, (a) => a.height...) minHeightColumn.height += child.props.height } }) return columns } 3.

3.9K3 1

新时代布局中一些有意思的特性

: masonry 是 firefox 在 firefox 87 开始支持的一种基于 grid 布局快速创建瀑布流布局的方式。...Can i use -- grid-template-rows: masonry ? 正常而言，我们想要实现瀑布流布局还是需要花费一定的功夫的，即便是基于 grid 布局。.../ 5; } &:nth-child(4) { grid-column: 4; grid-row: 1 / 6; } &:nth-child...: repeat(4, 1fr); + grid-template-rows: masonry; } 便可以轻松的得到这样一种瀑布流布局： ?...-- grid-template-rows: masonry 实现瀑布流布局当然，这是一个最简单的 DEMO，关于更多 grid-template-rows: masonry 相关知识，你可以详细的看看这篇文章

1.6K1 0

七个帮助你处理Web页面层布局的jQuery插件

1.UI.Layout jQuery UI布局插件官方网站：http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局。...图片发自简书App 2.jQUery Masonry 官方网站：https://masonry.desandro.com/?...resources/jquery-masonry 所有项目的大小和样式都由您自己的CSS处理。项目大小可以用响应式布局的百分比来设置 ?...图片发自简书App 4.jQuery pageSlide Query pageSlide 是一个jQuery插件，它可以控制一个隐藏页面的显示和关闭。...图片发自简书App 6.Columnizer 官方网址：https://welcome.totheinter.net/columnizer-jquery-plugin/ Columnizer jQuery

9.3K2 0

CSS Layout API初探：瀑布流布局实现

css属性 static inputProperties = ['--masonry-gap', '--masonry-column']; // 这个方法用于在弹性布局中确定元素尺寸，可以空着...fragment，只有这样我们才可以修改子元素的偏移// 设定子元素宽度，获取fragmentslet childFragments = await Promise.all(children.map((child...) => { return child.layoutNextFragment({ availableInlineSize: childAvailableInlineSize });}));紧接着，...选取其中最短的一列进行插入操作（倘若按照顺序插入会导致每列的高度差距过大）// 设定子元素宽度，获取fragmentslet childFragments = await Promise.all(children.map((child...) => { return child.layoutNextFragment({ availableInlineSize: childAvailableInlineSize });}));let

8073 0

JS一些插件收集

2017-10-30更新 Blueimp jquery相册插件 http://blueimp.github.io/Gallery/ bootstrap-markdown bootstrap的markdown...checkbox和radio插件 http://icheck.fronteed.com/ idle-timer jquery监视用户活动的插件 https://github.com/thorst/jquery-idletimer...://www.jasny.net/bootstrap/getting-started/ jeditable jquery实时编辑插件 https://github.com/tuupola/jquery_jeditable...Justified-Gallery/ jvectormap 地图插件 http://jvectormap.com/ ladda 加载提示插件 http://lab.hakim.se/ladda/ masonry...布局插件 https://masonry.desandro.com/ metisMenu 树状插件 http://mm.onokumus.com/ morris.js 图标插件 http://morrisjs.github.io

10.2K3 0

700美金的WordPress Dos漏洞CVE-2018-6389分析

,jquery-core,jquery-migrate,jquery-ui-core,jquery-effects-core,jquery-effects-blind,jquery-effects-bounce...,jquery-ui-slider,jquery-ui-sortable,jquery-ui-spinner,jquery-ui-tabs,jquery-ui-tooltip,jquery-ui-widget...,jquery-form,jquery-color,schedule,jquery-query,jquery-serialize-object,jquery-hotkeys,jquery-table-hotkeys...,jquery-touch-punch,suggest,imagesloaded,masonry,jquery-masonry,thickbox,jcrop,swfobject,moxiejs,plupload...,jquery-touch-punch,suggest,imagesloaded,masonry,jquery-masonry,thickbox,jcrop,swfobject,moxiejs,plupload

1.1K1 0

CSS3与页面布局学习总结（四）——页面布局大全

(1){flex:1 1 300px;} .flex :nth-child(2){flex:2 2 200px;} .flex :nth-child(3){flex:3 3 400px;} 本例定义了父容器宽...3.3、masonry实现瀑布流布局 masonry是一个响应式网格布局库（非jQuery）。...3.3.3、初始化插件使用jQuery： $('.grid').masonry({ // options....../img/phone.png';" /> ...可以结合 jQuery、RequireJS 使用。

7.9K7 3

CSS3与页面布局学习总结（四）——页面布局的多种方法

实现瀑布流布局 masonry是一个响应式网格布局库（非jQuery）。...官网：http://masonry.desandro.com/ 源码：https://github.com/desandro/masonry 3.3.1、下载并引用masonry 可以去官网或github...下载“masonry.pkgd.min.js”，将下载到的插件添加到项目中，并在页面中添加引用，如下所示： <script src="js/<em>masonry</em>/<em>masonry</em>.pkgd.min.js" type...、初始化插件使用jQuery： $('.grid').masonry({ // options... itemSelector: '.grid-item', columnWidth: 200 });...可以结合 jQuery、RequireJS 使用。

2.4K2 0

分享：12个CSS小技巧，让你的代码简洁高效

border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素…… /* remove border */ .nav li:last-child... { border-right: none; } ……可以直接使用 :not() 伪类来应用元素： .nav li:not(:last-child) { border-right: 1px solid...当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）： .nav li:first-child ~ li { border-left: 1px solid #666; } 给 body...使用负的 nth-child 选择项目在CSS中使用负的 nth-child 选择项目1到项目n。...calendar { table-layout: fixed; } 用Flexbox摆脱外边距的各种hack 当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth

8352 0

12 个 Css 小技巧

使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG 优化显示文本对纯CSS滑块使用 max-height...{ border-right: none; } ……可以直接使用 :not() 伪类来应用元素： .nav li:not(:last-child) { border-right: 1px solid...当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）： .nav li:first-child ~ li { border-left: 1px solid #666; } 给 body...使用负的 nth-child 选择项目在CSS中使用负的 nth-child 选择项目1到项目n。...calendar { table-layout: fixed; } 用Flexbox摆脱外边距的各种hack 当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth

1.1K1 0

CVE-2018-6389: WordPress

,jquery-core,jquery-migrate,jquery-ui-core,jquery-effects-core,jquery-effects-blind,jquery-effects-bounce...,jquery-ui-button,jquery-ui-datepicker,jquery-ui-dialog,jquery-ui-draggable,jquery-ui-droppable,jquery-ui-menu...,jquery-ui-slider,jquery-ui-sortable,jquery-ui-spinner,jquery-ui-tabs,jquery-ui-tooltip,jquery-ui-widget...,jquery-form,jquery-color,schedule,jquery-query,jquery-serialize-object,jquery-hotkeys,jquery-table-hotkeys...,jquery-touch-punch,suggest,imagesloaded,masonry,jquery-masonry,thickbox,jcrop,swfobject,moxiejs,plupload

8762 0

Scrapy爬取笑话网，Python3.5+Django2.0构建应用

{% endfor %} '); $('#masonry').masonry('reloadItems'); $('#masonry...'); $('#masonry').masonry('reloadItems'); $('#masonry...').masonry('reloadItems'); $('#masonry').masonry('layout');...6、补充说明 UI使用了bootstrap、jquery、masonry、ajax无限加载

8291 0

动图展示 60+ 个前端常用插件库合集

lightSlider 官网：JQuery lightSlider Github：sachinchoolur/lightslider JQuery lightSlider是一个轻量且响应式的跑马灯/幻灯片...jquery-loading 官网：jquery-loading 起源于为了在读取或运行中，锁住特定对象，并同时保持让浏览者可以操作页面的其他部分。...jquery-validation 官网：jQuery Validation Github：jquery-validation jQuery Validation插件让用户端检查表单变得更容易，并提供大量的定制化设定...Masonry.js 官网：Masonry Masonry常用于瀑布流布局的插件。...搭配Animation.css可以让画面更活泼，另外也支持jQuery或Angular。

6.5K4 0

性能工具之Jmeter上传与下载介绍

) 根据 parent 抽象路径名和 child 路径名字符串创建一个新 File 实例。...File(String parent, String child) 根据 parent 路径名字符串和 child 路径名字符串创建一个新 File 实例。...-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!

1.3K3 0

bower简要入门

6.包的安装例如安装jquery，输入以下命令： bower install jquery --save 然后bower就会从远程下载jquery最新版本到你的js/lib目录下, 其中--save参数是保存配置到你的...bower.json，你会发现bower.json文件已经多了一行： "dependencies": { "jquery": "~2.1.4" } 除此之外， bower还支持通过以下方式来安装包...： # 读取配置文件bower.json进行安装 $ bower install # 通过Github shorthand进行安装 $ bower install desandro/masonry #...8.包的更新如果我们不想用最新的jquery版本，而只想用旧的版本，怎么办？...可以直接修改bower.json中的jquery版本号，然后执行以下命令即可： bower update 9.包的查找 bower支持模糊查找，例如查找包含字符串bootstrap的包 bower search

4563 0

干货：CSS 专业技巧

solid #666;} 当然，你也可以使用 .nav li + li 或者 .nav li:first-child ~ li ，但是 :not()更加清晰，具有可读性。...逗号分隔列表使列表的每项都由逗号分隔： ul > li:not(:last-child)::after { content: ",";} 因最后一项不加逗号，可以使用 :not() 伪类。...使用负的 nth-child 来选择元素使用负的 nth-child 可以选择 1 至 n 个元素。...()这个技巧，试下这个： /* 选择第 1 至第 3 个元素并显示出来 */li:not(:nth-child(-n+3)) { display: none;} 如此简单！...利用 Flexbox 去除多余的外边距与其使用 nth-， first-，和 last-child 去除列之间多余的间隙，不如使用 flexbox 的 space-between 属性： .list

1.5K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭