天道酬勤,学无止境

jquery-selectors

Jquery select class from variable

问题 我正在使用 Jquery 按变量查找类。 所以, var className = "whatever"; $("#container ul li") 如果包含具有类名的元素,请执行此操作 上面的代码怎么写? 是吗 $("#container ul li").find("."+ className).each(function(){ console.log("I found one"); }); 显然代码不起作用 回答1 <li>元素上有className吗? 如果是这样,你可以这样做: $('#container ul li.' + className)... 您只是将 className 连接到选择器字符串中(使用类选择器)。 或者这会给你同样的结果。 $('#container ul li').filter('.' + className)... 这与您的.find()解决方案类似,但使用 .filter() 将找到的<li>元素限制为具有className的元素。 如果具有className的元素是<li>元素的后代,那么使用 .find() 应该可以工作,或者您可以这样做: $('#container ul li .' + className)... ...看起来与上面的几乎相同,但在li之后引入了一个空格,这是一个后代选择器。

2022-05-15 02:41:07    分类:技术分享    jquery   jquery-selectors

jQuery Selectors: Grabbing a section of children that are of a given tag

问题 假设我有给定元素(例如“tr”)的任意数量的子元素(例如“td”),并且我需要在给定位置(例如 3; td 的 3 - 6 7 ,在这种情况下)。 执行此操作的最佳查询是什么样的? 请注意,我可能要与成千上万的孩子打交道,所以我不想在例行的基础上对数千个数组进行切片。 编辑:它不必通过 jQuery,如果有更有效的选择直接进入 DOM ...... 回答1 您可以为此使用 .slice() ,例如: $("tr td").slice(2, 7) //of if you have the <tr> $(this).children("td").slice(2, 7) 上面将获得第 3 到第 7 个<td> ,因为它是一个基于 0 的索引。 或者 jQuery-less 版本,假设你有<tr> DOM 元素: var tds = tr.getElementsByTagName("td"); for(var i = 2; i<7; i++) { //do something } 您可以在此处测试这两个版本。

2022-05-14 19:59:04    分类:技术分享    jquery   html   dom   jquery-selectors

Selector for best performance in jQuery?

问题 我刚刚花了 2 个小时阅读有关 jQuery 选择器的在线指南和博客。 每个人都说不同的话,而他们中的每一个似乎都如此确定。 我需要 Stackoverflow 的专家意见。 $(' #my-id div.my-class ') $(' #my-id .my-class ') $(' div.my-class ') $(' .my-class ') <div id="my-id"> <div class=".."> <div class=".."> Awesome stuff! </div> <div class="my-class"> <p> I like carrots! </p> </div> </div> </div> 您认为哪个是最好的选择器? 我还需要一个简短的解释,因为重写数千行代码处于危险之中。 它以一种或另一种方式发生,我只是不想做两次。 另外,如果我想获得<p> ,我应该给它一个类,因为 jQuery 和 CSS 从右到左读取选择器吗? 甚至有太多的类,还是因为人们只是懒惰? 如果相同的规则适用于 CSS,请告诉我。 一个字就够了。 回答1 如果您想要的只是与.my-class匹配的 DOM 元素的所有实例,那么我认为您没有理由使用以下任何内容: $('.my-class') 其他都是更具体的选择器,如果您想将选择器缩小到不仅仅是$('.my-class'

2022-05-12 11:41:48    分类:技术分享    jquery   jquery-selectors

how can i get all inputs excluding buttons and hidden fields with jquery?

问题 我有以下内容将排除所有按钮,但我怎样才能排除隐藏字段? $("#selector").find(":input:not(:button)").each(function (i) { // do something 我敢肯定这可能很简单,我只是找不到。 非常感谢! 回答1 $('#selector').find('input').not(':button').not('input[type=hidden]').each(function(i) { }); 应该这样做。 我不确定这个是否 $('#selector').find('input').not(':button').not(':hidden').each(function(i) { }); 也适用于此目的,但值得一试。 回答2 $('#selector :input').not(':button,:hidden').each(...); 回答3 $("#selector :input:not(:button, :hidden)").each(function (i) { // do something 回答4 对我来说,(jquery 2.2.0) 不工作 $('#signup-form :input:not(:hidden :button)').each(function(){ $('#signup-form

2022-05-11 01:40:07    分类:技术分享    jquery   jquery-selectors   css-selectors

jQuery radio array selector

问题 我有单选按钮,例如: <input type="radio" value="a" name="questions[0]"> <input type="radio" value="b" name="questions[0]"> <input type="radio" value="c" name="questions[0]"> <input type="radio" value="d" name="questions[0]"> <input type="radio" value="a" name="questions[1]"> <input type="radio" value="b" name="questions[1]"> <input type="radio" value="c" name="questions[1]"> <input type="radio" value="d" name="questions[1]"> 如何使用 jQuery 循环遍历它? 我想确认每个问题都得到了答复。 谢谢。 编辑:或者有没有办法获得问题数组的长度? 回答1 $("#myForm input[type=radio]").each(function() { //whatever you need }); 回答2 $('[name="questions[1]"]:checked')

2022-05-07 10:05:20    分类:技术分享    javascript   jquery   jquery-selectors

jQuery Xpath selector to select an element which id contains 'sometext'

问题 我在 aspx 页面中有一个列表框元素,它的 id 是 attributesList。 我想选择这个元素来跟踪它的更改事件,但我不能直接选择它的 id,因为 asp.net 在运行时会改变它的 id。 它的 id,attributesList 变为 ctl00_adminPlaceHolder_attributesList。 所以我想做的是使用“包含”xpath 表达式来选择元素。 回答1 $("*[id$='attributesList']")

2022-05-07 02:06:16    分类:技术分享    asp.net   jquery   xpath   jquery-selectors   contains

Destroy or recalculate CSS nth-child selector

问题 上下文: 我有一个清单。 使用 jQuery,我动态地... ...隐藏/显示某些列表项。 ...计算第三个和第四个列表项以应用特定的类。 问题: 使用第 n 个子选择器的 CSS 样式(来自样式表)被应用到每三个列表项。 问题是当我动态隐藏/显示列表项时,CSS nth-child 选择器似乎没有重新计算。 由于 jQuery 已经在计算第三个列表项,所以我不需要重新计算 CSS nth-child 选择器,除非没有办法取消或销毁它。 代码: 加价: <ul class="teamlist"> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> </ul> jQuery: $('.teamlist li:visible').each(function (i) { if (i % 3 == 0) $(this).addClass('teamlist_fourth_item'); }); $('.teamlist li:visible').each(function (i) { if ((i+1

2022-05-06 19:57:17    分类:技术分享    jquery   css   jquery-selectors   css-selectors

selecting root element in jquery

问题 我需要能够在不知道节点类型、类、id 或层次结构的情况下从片段中选择根元素。 <div id="0"> <div id="0a"> <div id="a01"></div> </div> <div id="0b"> </div> <div id="0c"> </div> </div> 我希望能够执行 $(':root') 之类的操作,并在上面的示例中选择 0。 更好的是,我更喜欢$(':level(0)')这意味着与上面相同, $(':level(1)')将选择 0a、0b 和 0c 和$(':level(1)>div')将选择 a01。 关于如何巧妙地做到这一点的任何想法? 回答1 好的,所以您需要做的是以下(假设您使用的是您拥有的示例),如果您想使用 jquery 查找顶级节点如下: $('*:not(* *)'); 您在这里真正要求的是所有不是其他节点子节点的节点。 问题在于,对于 html 文档,这将始终只为您提供 html 元素,这并不是特别有用。 因此,如果您想在 html 文档的正文中查找顶级元素,您可以使用更简单的方法: $('body > *'); 如果你然后想要第二级,你就去 $('body > * > *'); 但是,假设你有某种任意的文档结构(比如你提到的 foo ),你可以做的是使用第一个例子来找到第一级: $('*:not(* *)')

2022-05-05 17:58:08    分类:技术分享    jquery   jquery-selectors

Problem using jQuery clone function in form

问题 您将检查的那些代码片段适用于 FF、Chrome、Safari,但在运行 jQuery 克隆功能时似乎是 IE 的问题: 我的模板: <form method="post" action="/post/add/"> {{ form.management_form }} <div class='table'> <table class='no_error'> <input id="id_mypost_set-0-title" type="text" name="mypost_set-0-title" /> <input id="id_mypost_set-0-content" type="text" name="mypost_set-0-content" /> </table> </div> <input type="button" value="Add Other" id="add_more"> <script> $('#add_more').click(function() { cloneMore('div.table:last', 'mypost_set'); }); </script> </form> 在一个 JavaScript 文件中: function cloneMore(selector, type) { var newElement = $(selector)

2022-05-05 09:10:04    分类:技术分享    javascript   jquery   html   django   jquery-selectors

OR and AND combinations inside if-statement

问题 我有这个选择器: $('ul:not(.sub-menu) > li, ul.sub-menu > li:last-child').not(':has(ul.sub-menu)'); 得到这些元素: 每个父级不是.sub-menu的直系li后代(除非它是最后一个,参见 2。) ul.sub-menu的最后一个 li 元素排除所有li的父ul.sub-menu 现在,我想在 if 语句中使用它,它位于悬停函数内部。 换句话说,它必须是相对于该列表项而不是列表项。 像这样的东西: $("nav li").hover(function () { var $this = $(this); if (($this.parent("ul:not(.sub-menu)") || ($this.parent("ul.sub-menu") && $this.is(":last-child"))) && $this.not(":has(ul.sub-menu)")) { // do something } }); 但这不起作用。 我认为这与在 if 语句中组合 OR 和 AND 选择器有关,但我似乎无法调试它:上面的代码选择所有列表项而没有区别。 回答1 $this.parent("ul:not(.sub-menu)")永远不会是假的,即使集合是空的。 在您的情况下使用$this.parent(

2022-05-04 17:56:37    分类:技术分享    jquery   if-statement   jquery-selectors