天道酬勤,学无止境

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
}

您可以在此处测试这两个版本。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • jQuery Selectors: Grabbing a section of children that are of a given tag
    Say I have an arbitrary number children (e.g. "td"s) of a given element (e.g. a "tr"), and I need to grab a given number of these (say, 4) at a given position (say, 3; td's 3 - 67, in this case). What would the best query for doing this look like? Note that I could be dealing with a potentially thousands of children, so I'd like to not be slicing up arrays in the thousands on a routine basis. Edit: It doesn't have to go through jQuery, if there's a more efficient option that goes straight to the DOM...
  • 如何在 jQuery 中编写一个简单的预排序 DOM 树遍历算法?(How to write a simple preorder DOM tree traversal algorithm in jQuery?)
    问题 我想在这里找到代码:http://www.jslab.dk/articles/non.recursive.preorder.traversal.part2 // HTML element var root = document.documentElement; recursivePreorder(root); // Recusively find and handle all text nodes function recursivePreorder(node) { // If node is a text node if (node.type == 3) { // Do something with node } // else recurse for each child node else { for(var i=0; i<node.childNodes.length; i++) recursivePreorder(node.childNodes[i]); } } 并将其转换为干净的 jQuery。 任何想法? 我知道递归需要argument.callee,因为jQuery 中的回调是匿名的,但我对JQuery 太陌生,无法进一步研究。 谢谢! 回答1 正如 Code Duck 所指出的那样,jQuery 以源顺序、深度优先——或者,如您所说的那样,按顺序遍历节点。
  • jQuery 选择器中的直接后代 (>) 与后代有什么区别?(What is the difference direct descendent (>) vs. descendant in jQuery selectors?)
    问题 这两个 jQuery 语句有什么区别? 他们似乎通过获取所有孩子的 div 标签来做同样的事情。 $("#mainblock div") $("#mainblock > div") 回答1 $("#mainblock > div") = 孩子们的唯一关卡 $("#mainblock div") = 所有孩子+后代。 回答2 看看 jQuery 选择器 Child Selector ("parent > child") - Hierarchy 选择由“parent”指定的元素的“child”指定的所有直接子元素。 后代选择器(“祖先后代”)-层次结构选择作为给定祖先的后代的所有元素。 回答3 $("#mainblock div") 这一目标针对“#mainblock”中的所有 DIV,无论它是“#mainblock”的直接子代,还是主块的子代的子代,等等。 $("#mainblock > div") 这将仅针对“#mainblock”的直接子 DIV,而忽略其他 DIV。 如果您只有直接的孩子,这个比上面的要快。 因为它不是试图在孩子的其他元素中找到。 回答4 第一个将获得#mainblock所有div后代。 第二个将获得所有div是#mainblock直接子#mainblock 回答5 $("#mainblock div") 找到#mainblock下的所有div $("
  • > :first-child 无论类型是已知还是未知都有效吗?(Does > :first-child work whether the type is known or unknown?)
    问题 我已阅读是否有仅适用于第一个直接子级的 CSS 选择器? 和 http://www.w3schools.com/cssref/css_selectors.asp 我想我必须将效果应用于<h1>标签的第一个孩子,但我无法让它工作。 所以相反,我试图使用nth-child ,但仍然没有运气。 JSFiddle <section> <article> <h1>Test Details</h1> <ul> <li>Layer This</li> <li>Layer That</li> <li>Layers</li> </ul> </article> </section> <section> <article> <h1>Campaign details</h1> <p>Text</p> </article> </section> CSS section { padding:30px; } section article { background:#EBEBEB; } section article h1 { background:#0C79CB; padding:10px; } /* This is where I am struggling */ section article h1:nth-child(2):before { background-color:white
  • 获取子元素的属性(Get attribute of child element)
    问题 如果我有以下标记: <p class="header hours"> <a href="javascript:void(0)" class="sort" sortcat="hours"> Hours <span class="imgholder" sortcat="hours"> </span> </a> </p> 如何定位锚标记中的<span>标记? 还有五个类似的<p>标签条目,每个条目都有不同的sortcat=值 回答1 $(".sort").click(function(){ var cat = $(this).children("span").attr("sortcat"); //do something with the sortcat }); 回答2 $("a span[sortcat]").attr('sortcat') 这将为您提供第一个元素的sortcat值。 要获得所有这些,请执行以下操作: $("a span[sortcat]").map(function(){ return $(this).attr('sortcat') }) 看到这个工作演示:http://jsfiddle.net/BwgDW/ 回答3 $('.sort span') 我误会了吗? 回答4 有几种方法可以引用 span 标签,但所有方法都以“.attr('sortcat');”结尾
  • jquery 选择器有哪些类型? [关闭](What are the types of jquery selectors? [closed])
    问题 关闭。 这个问题需要细节或清晰。 它目前不接受答案。 想改善这个问题吗? 通过编辑此帖子添加详细信息并澄清问题。 7年前关闭。 改进这个问题 我对这个问题有疑问并且没有任何好的来源,你能帮我吗? 什么是选择器? 回答1 这些是 jquery 选择器(从 jQuery 1.10 和 jQuery 2.0 开始): 所有选择器( "*" ) 选择所有元素。 :animated选择器选择运行选择器时正在播放动画的所有元素。 属性包含前缀选择器[name|="value"] 选择具有指定属性且值等于给定字符串或以该字符串开头后跟连字符 (-) 的元素。 属性包含选择器[name*="value"] 选择具有包含给定子字符串的值的指定属性的元素。 属性包含单词选择器[name~="value"] 选择具有指定属性的元素,其值包含给定的单词,以空格分隔。 属性以选择器结尾[name$="value"] 选择具有以给定字符串结尾的值的指定属性的元素。 比较区分大小写。 属性等于选择器[name="value"] 选择具有与特定值完全相等的值的指定属性的元素。 属性不相等选择器[name!="value"] 选择不具有指定属性或具有指定属性但不具有特定值的元素。 属性以选择器[name^="value"] 选择具有以给定字符串开头的值的指定属性的元素。
  • 你如何在 PHP 中解析和处理 HTML/XML?(How do you parse and process HTML/XML in PHP?)
    问题 如何解析 HTML/XML 并从中提取信息? 回答1 原生 XML 扩展 我更喜欢使用其中一种原生 XML 扩展,因为它们与 PHP 捆绑在一起,通常比所有 3rd 方库都快,并为我提供了对标记所需的所有控制。 判断 DOM 扩展允许您使用 PHP 5 通过 DOM API 操作 XML 文档。它是 W3C 文档对象模型核心级别 3 的实现,一个平台和语言中立的接口,允许程序和脚本动态访问和更新文件的内容、结构和样式。 DOM 能够解析和修改真实世界(损坏的)HTML,并且可以执行 XPath 查询。 它基于 libxml。 使用 DOM 需要一些时间来提高效率,但 IMO 这段时间非常值得。 由于 DOM 是一种与语言无关的接口,您会发现多种语言的实现,因此如果您需要更改您的编程语言,那么您很可能已经知道如何使用该语言的 DOM API。 在抓取 A 元素的 href 属性中可以找到基本用法示例,在 php 中的 DOMDocument 中可以找到一般概念概述 如何使用 DOM 扩展已在 StackOverflow 上进行了广泛的介绍,因此如果您选择使用它,您可以确定您遇到的大多数问题都可以通过搜索/浏览 Stack Overflow 来解决。 XML阅读器 XMLReader 扩展是一个 XML 拉式解析器。 阅读器充当在文档流上前进并在途中的每个节点处停止的光标。
  • jQuery 的空格和 > 选择器有什么区别?(What is the difference between jQuery's space and > selectors?)
    问题 空格和 > 选择器有什么区别? 并且可能相关,我怎样才能寻找其他事物的直接子代,而不是降低后代线? 回答1 为了: <ul> <li>Item 1</li> <li>Item 2 <ul> <li>Item 2.1</li> <li>Item 2.2</li> </ul> </li> <li>Item 3</li> </ul> 例如 $("ul > li").addClass("blah"); 将类“blah”添加到 1 2 和 3 而: $("ul li").addClass("blah"); 将类“blah”添加到每个列表元素。 我不确定你指的是 < 和 ? 运营商。 回答2 在 CSS 中, >表示“直接子节点”:仅选择直接子节点的节点。 空格表示“任何后代”:可以选择直接子项和这些子项的子项。 我敢打赌 jQuery 使用相同的约定。 回答3 如前所述,空格将选择任何后代,而>将仅选择直接子代。 如果您只想选择孙辈或曾孙辈,则可以使用以下命令: #foo > * > * > .bar (所有类为“bar”的元素都是id为“foo”的元素的曾孙) 回答4 看这个.. $(".testit > a") //match the first <a> tag below $(".testit a") // matches all <a> tag below <p class=
  • 使用 CSS 隐藏仅包含空格的元素(Hiding an element that contains only spaces using CSS)
    问题
  • CSS 显示:flex; 在 IE 浏览器中无法正常工作(CSS display: flex; not working properly in IE browser)
    问题 我正在使用 Jquery 可拖动组件向<p>添加一个元素。 我有以下问题 IE 浏览器显示糟糕的外观(见图片) 它显示all-scroll而不是Pointer 这是因为这个 CSS p.given { display: flex; flex-wrap: wrap; } 这个 CSS 我用来正确显示<p>内容。 如果我删除该 CSS,可拖动组件有时会添加多个位置。 以及<p>内容在删除组件后转到下一行。 你能建议什么而不是flex吗? 我无法删除这个 CSS ( p.given { display: flex; flex-wrap: wrap; } ),因为如果我删除那个<p>内容不灵活,所以请给我一个解决方案来避免这个 IE 浏览器问题. $(function() { function textWrapper(str, sp, btn) { if (sp == undefined) { sp = [0, 0]; } var txt = ""; if (btn) { txt = "<span class='w b'>" + str + "</span>"; } else { txt = "<span class='w'>" + str + "</span>"; } if (sp[0]) { txt = " " + txt; } if (sp[1]) { txt = txt +
  • 用于 PHP DOMDocument 的类 jQuery 选择器(jQuery-like selectors for PHP DOMDocument)
    问题 我正在使用 DOMDocument,我想知道是否存在某种使用类 CSS 选择器来选择节点的方法,就像我们在 jQuery 中所做的那样。 示例情况:我正在解析一个 XML 文件,其中一个片段如下所示: <gesmes:Envelope> <gesmes:subject>Reference rates</gesmes:subject> <gesmes:Sender> <gesmes:name>European Central Bank</gesmes:name> </gesmes:Sender> <Cube> <Cube time="2009-07-13"> <Cube currency="USD" rate="1.3975"/> <Cube currency="JPY" rate="129.03"/> <Cube currency="BGN" rate="1.9558"/> <Cube currency="CZK" rate="26.028"/> </Cube> </Cube> </gesmes:Envelope> 使用类似 jQuery 的选择器访问此结构将非常简单。 例如,我可以使用 $("Cube[currency]") 检索具有“货币”属性的所有Cube元素。 但是我怎么能用 PHP 的DOMDocument做同样的事情呢? 我想选择具有属性或具有特定属性值的元素。
  • 使用 jQuery 将 WordPress 帖子附件移动到每个帖子动态创建的 div?(Use jQuery to move WordPress post attachments to per-post dynamically-created divs?)
    问题 这是另一个问题的变体,在这里得到了很好的回答。 我需要使用 jQuery 将 WordPress 帖子附件 - 图像和 iframe - 移动到帖子本身之外的新 div,并在每个帖子的基础上执行此操作(以便每个帖子的图像和 iframe 保持在本地,在本地邮政包装。 我当前的代码几乎完成了这一点,但将所有帖子中的所有图像和 iframe 移动到第一个帖子中的一个新 div 中。 这是jQuery: jQuery("document").ready (function($){ var matchesEl = $("section img, section iframe"); if ( matchesEl.length > 0) { var newDiv = $("<div />", {'class': 'royalSlider'}); newDiv.prependTo(matchesEl.parents("section")); matchesEl.each(function() { $(this).addClass('rsImg').appendTo(newDiv); }); } }); 这是 jQuery 处理之前的 html: <section class="active"> <p> <a href="<a href="http://www.freshorigins
  • E>F 和 E+F 选择器的区别?(Difference between E>F and E+F selectors?)
    问题 我在 jQuery 中读到: E>F匹配所有具有标记名称F元素,这些元素是E直接子元素。 E+F匹配所有具有标签名称F且紧跟标签名称E的兄弟元素的元素。 两者有什么区别? 谁能提供一个明确而具体的例子? 回答1 首先,由于 jQuery 从 CSS 中借用了>和+ ,它们的行为方式与 Selectors 规范中描述的方式相同; 请参阅子组合器和相邻兄弟组合器。 “子级”是指嵌套在另一元素中的一个级别的元素。 为了强调直接嵌套的限制,这些可能被称为“直接子代”,如文档中所示,但它们的含义相同。 包含在任何嵌套深度中的元素都称为“后代”; 这包括子女、孙子女、曾孙子女等。 选择器 E>F 只会匹配以下结构中的F元素: <E> <F></F> </E> 但不是在以下结构中(这将被 EF、 D>F甚至E>D>F匹配): <E> <D> <F></F> </D> </E> 在这个答案中可以找到更真实的插图。 如前所述,虽然它涵盖了 CSS,但它是一样的,因为 jQuery 无论如何都是从 CSS 借用它的。 “兄弟”是指同一嵌套级别的元素; 即作为同一父元素的子元素的元素。 可以有一个/下的兄弟姐妹和一个/前面的兄弟姐妹,只要他们都有着相同的父,但在这种情况下,“ F被立即前面元素E元素”是指F那之后立刻浮现元素E元素,它们之间没有其他兄弟元素。 选择器 E+F
  • 与属性过滤器最接近的 jQuery(jQuery closest with attribute filter)
    问题 jQuery 1.5.1 是否支持最接近方法中的属性选择器? 鉴于下面的结构, el表示值为 513 的复选框,我试图向上检查并检查值为 0 的祖先复选框 $(el).closest("input[value='0']")[0].checked = true; 但是选择器什么也没返回。 我错过了什么愚蠢的东西吗? 编辑 唉,所以值为 0 的复选框不是el的祖先,只是ul祖先的兄弟。 我得到了它的工作 $(el).closest("ul").siblings("input[value='0']")[0].checked = true; 但是我们有更清洁的方法来抓取它吗? 回答1 .closest() 方法确实支持与任何其他 jQuery 方法相同的属性选择器(尽管我不知道您提到的 jQuery 的特定版本),但这里的问题是.closest()不只是查看一般附近,它通过祖先。 您正在尝试选择一个不是您开始的元素的祖先的输入元素。 (鉴于输入不能包含其他元素,它们永远不会成为任何东西的祖先......) 您应该可以通过首先选择目标复选框的父 li 元素来做到这一点: $(el).closest('li:has(input[value="0"])') .find('input[value="0"]').prop("checked",true); 演示:http://jsfiddle
  • 在 jQuery 中遍历表中的第二列(Iterate through second columns in a table in jQuery)
    问题 我在 dom 中有一张看起来像这样的桌子 <div id="table"> <table> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr> </div> 我想遍历这个表,比如$('#table').each(function(){})但我只想遍历第二列。 所以在这个例子中的值是 b。 任何想法如何做到这一点? 谢谢! 回答1 尝试这个: $("table tr td:nth-child(2)").each(function () { }); 回答2 在 jQuery 中使用nth-child选择器,这应该可以工作: $("#table").find("td:nth-child(2)").each(function () { }); 这使用第nth-child选择器 http://api.jquery.com/nth-child-selector/ ,正如链接所述,它将选择所有<td>元素,它们是其父元素的第二个子元素(这将是<tr> )。 这是一个演示它的小提琴:http://jsfiddle.net/GshRz/ 如果您正在寻找一个选择器来获取仅立即在表中的<td> s(例如不在嵌套表中),则使用如下内容
  • web前段选择器
    CSS选择器 派生选择器 1.依据元素的上下文关系定义样式 p span { font-size: 16px; } 2.p标签下的span标签添加样式,无需在span标签里面增加id或者class,方便,这种样式比起自身添加样式的级别更高,覆盖自身样式 id选择器 1.HTML 添加 id,id是唯一的,css中的选择器以‘#’进行定义: #check { color: red; } 2.注意,id选择器通常用于构建派生选择器: #check span { color: blue; } 3.只有id为check的元素下的span标签有该样式。 4.id只有一个,但是样式可以使用多次 5.兼容老版本Windows/IE问题 该版本下,可能会忽略 padding: 10px div#check { border: 1px dotted #000; padding: 10px; } 类选择器 1.样式中频繁使用到,以’.’来显示 .red{ color: red; } 2.相同元素可设定相同的类,并遵守相同的样式规则 <span class="red"></span> <span class="red"></span> <!-- 两个span标签会颜色为红色 --> 3.与id选择器一样,也经常使用到派生选择器 p .red { color: red; } 属性选择器 1
  • 测试选择器是否匹配给定元素(Test if a selector matches a given element)
    问题 有什么方法可以测试选择器是否匹配给定的DOM元素? 最好不要使用Sizzle这样的外部库。 这是针对一个库的,我想最大程度地减少“核心”库所需的第三方插件的数量。 如果最终需要Sizzle,我将其作为插件添加到那些希望启用该功能的人的库中。 例如,我将能够执行以下操作: var element = <input name="el" /> matches("input[name=el]", element) == true 编辑:经过更多考虑之后,我想出了一个解决方案,从技术上讲这是可行的,但是就效率而言,它似乎并不是最优的: function matchesSelector(selector, element) { var nodeList = document.querySelectorAll(selector); for ( var e in nodeList ) { return nodeList[e] === element; } return false; } 基本上,该函数使用给定的选择器查询整个文档,然后在nodeList上进行迭代。 如果给定元素在nodeList中,则返回true,否则返回false。 如果有人能提出更有效的答案,我很乐意将他们的回答标记为答案。 编辑:Flavius Stef向我指出了针对Firefox 3.6 +
  • HTML + CSS + JS知识点复习(第一次)
    文章目录 HTML1、基本概述2、思维导图 CSS1、引入样式的四种方式2、选择器(重点)2.1、基本选择器(三个)2.2、层次选择器(四个)2.3、伪类选择器2.4、属性选择器 3、美化网页3.1、字体样式3.2、文本样式3.3、阴影3.4、设置背景图片3.5、渐变色 4、盒子模型(重点)4.1、边框4.2、内外边距4.3、其他 5、浮动5.1、display5.2、浮动 6、定位6.1、相对定位6.2、绝对定位6.3、固定定位 7、思维导图 JavaScript1、基本入门1.1、引入方式1.2、严格检查模式 2、数据类型2.1、字符串2.2、数组2.3、对象2.4、流程控制2.5、Map、Set 3、函数3.1、定义函数3.2、定义方法 4、内部对象4.1、Date4.2、JSON 5、面向对象6、BOM(Browser Object Model)6.1、window6.2、Navigator6.3、screen6.4、location(重要)6.5、document6.6、history 7、DOM(Document Object Model)7.1、获取DOM节点7.2、更新DOM节点7.3、删除DOM节点7.4、添加DOM节点 8、jQuery8.1、引入8.2、与原生js的区别8.3、jQuery下的DOM操作 9、思维导图 虽然在真正使用前端的时候
  • 【jQuery】第四课——掌握jQuery选择器的使用,会使用jQuery选择器获取元素
    知识点:了解jQuery选择器的基本概念及优势、能够使用不同的jQuery选择器选取元素,比如基本选择器、层次选择器、属性选择器、基本过滤选择器、可见性过滤选择器的使用,了解使用jQuery选择器的注意事项。 页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。 1、 jQuery选择器简介 jQuery 选择器允许您对 HTML 元素组 或 单个元素 进行操作。选择器是 jQuery 的根基,在 jQuery 中,对事件处理、遍历 DOM 和 Ajax 操作都依赖于选择器。熟练地使用选择器,不但能简化代码,而且能够事半功倍。jQuery 选择器可通过CSS 选择器、条件过滤两种方式获取元素。可以通过 CSS 选择器语法规则获取元素的 jQuery 选择器包括基本选择器、层次选择器和属性选择器;可以通过条件过滤选取元素的 jQuery选择器包括基本过滤选择器和可见性过滤选择器。 1.1 jQuery 选择器是什么 说到选择器,会让人自然地联想到 CSS(Cascading Style Sheets,层叠样式表),在 CSS中,选择器的作用是获取元素,而后为其添加 CSS 样式,美化其外观;而 jQuery 选择器
  • 获取元素的jQuery选择器(Getting a jQuery selector for an element)
    问题 在伪代码中,这就是我想要的。 var selector = $(this).cssSelectorAsString(); // Made up method... // selector is now something like: "html>body>ul>li>img[3]" var element = $(selector); 原因是我需要将此传递给外部环境,在该环境中,字符串是我交换数据的唯一方法。 然后,该外部环境需要将结果以及要更新的元素一起发送回去。 因此,我需要能够为页面上的每个元素序列化一个唯一的CSS选择器。 我注意到jquery有一个selector方法,但在这种情况下似乎不起作用。 仅当对象是使用选择器创建的时才有效。 如果该对象是使用HTML节点对象创建的,则它不起作用。 回答1 现在,我知道存在一个插件(我也想到了相同的名称),但这只是我编写的一些快速JavaScript。 它不考虑元素的id或类-仅考虑结构(并在节点名称不明确的地方添加:eq(x) )。 jQuery.fn.getPath = function () { if (this.length != 1) throw 'Requires one element.'; var path, node = this; while (node.length) { var realNode =