jquery-selectors 相关问题

将输入值乘以 span

这是我的小提琴： http://jsfiddle.net/19gwk4q6/ 网址： 这是我的小提琴： http://jsfiddle.net/19gwk4q6/ HTML: <ul> <li id="1"> <input type="text" name="1" class="parent" /> <input type="hidden" name="rank" value="8" class="rank" /> <span class="result"></span> </li> <li id="2"> <input type="text" name="2" class="parent" /> <input type="hidden" name="rank" value="1.75" class="rank" /> <span class="result"></span> </li> <li id="3"> <input type="text" name="1" class="parent" /> <input type="hidden" name="rank" value="10" class="rank" /> <span class="result"></span> </li> </ul> JS: $(document).on("change", ".parent", function() { var sum = 0; $(".parent").each(function() { var rank = $("input").next(".rank").val(); sum = $(this).val() * rank; }); $("input").next(".result").val(sum); }); 我有服务器端生成的列表，我需要将输入值 .parent * .rank 相乘，并将结果放入每个 <li> 的 span.result 中。我试图使用 .closest () 和 .next() 功能，但它不起作用。 谢谢你的帮助！ 从 OP 可以了解到 .result 是一个 span 所以 $("input").next(".result").val(sum); 不会工作，因为 span 没有一个叫做 .val() 的函数，使用 .text() 代替。还有改变 var rank = $("input").next(".rank").val(); 到 var rank = $(this).next(".rank").val(); 在这里演示 编辑 基于OP的评论。试试这个 $(document).on("change", ".parent", function() { var sum = 0; $(".parent").each(function() { var rank = $(this).next(".rank").val(); sum = $(this).val() * rank; $(this).parent().find(".result").text(sum); }); }); 更新的演示 你试过吗 var rank = $(this).siblings(".rank").val(); $(this).siblings(".result").val(sum);

jQuery：如果 XYZ，将类添加到这个和下一个元素

我有一个无序列表，其中的列表项数量未知，顺序未知。 我需要找到带有 .colspan 类的列表项，看看它后面的项目是否也有那个类，然后是...

jQuery next() 函数有时会检测到错误的项目

我刚做完我的网站，你可以找到这个页面的问题，只用手机浏览器。 http://easondesign.co/kayo/about-us/ 该功能在任何桌面浏览器上都运行良好，但是当我使用...

为什么我的带有“$(this).next”的 JavaScript/jQuery 脚本不起作用？

在“nopCommerce”中，我想更改侧分类导航。 现在，当有人点击一个类别时，它会被展开……但它不起作用。 HTML 看起来像这样： (...) $(

更新 ID 和 jQuery 事件处理程序时出现问题 [关闭]

我正在尝试制作某种形式，但我无法进入第三步。 我的下一个按钮确实有一个递增的 ID，如下所示： $('#to-q-2').click(函数 (e) { e.preventDefault(); $(这个).

Jquery next button function is not looped to the first slide once reached end

我创建了一个添加了下一个和上一个按钮的滑块。但是我遇到了一个我仍然无法弄清楚的问题。 单击下一个按钮，它会导航到下一个内容，但在

单击后淡入接下来的两个元素

我尝试再显示两个 div，每次都单击一个按钮。我有两个问题。 单击时仅显示一个（应显示两个） 第一次点击后不再重复 我已经尝试过...

jQuery - live() 不能与附加 div 中的 next() 一起工作

此元素的目的是拥有一个完全基于简单无序列表的可折叠导航系统。默认情况下，所有嵌套列表都将被隐藏，并附加 .toggle div（按钮）...

帮助 jQuery 尝试自动聚焦在 keyUp 之后的下一个输入字段上，尽可能通用

HTML 输入第三个数字 HTML <input class="fr pinPass" type="password" name="pin1" id="pin1_1" tabindex="100"/> <label>Enter the third number</label> <br class="cb"/> <input class="fr pinPass" type="password" name="pin1" id="pin1_2" tabindex="101"/> <label>Enter the fourth number</label> <br class="cb"/> <input class="fr pinPass" type="password" name="pin1" id="pin1_3" tabindex="102"/> <label>Enter the second number</label> 当前的 jQuery $(".pinPass").focus(function () { $(this).keyup(function(){ $("input").siblings('.pinPass').filter(':first').focus(); }); }); 问题： 我正在尝试在每个输入字段中的 keyUp 之后的下一个输入字段上设置 autoFocus。 到目前为止，我已经想出了一个解决方案，它一直循环直到它到达最后一个被选中的，或者如果我使用 :first 过滤器，它总是返回到它在页面上找到的第一个。 我不认为我可以使用 next()，因为它不是集合中的下一个节点。 总会有标签分隔每个输入字段。 任何帮助将不胜感激。 您可以使用 :first，但是 .next() 只会返回 very 下一个兄弟姐妹 if 如果它匹配选择器。相反，你想要 .nextAll() 和一个选择器，像这样： $(".pinPass").keyup(function(){ $(this).nextAll('.pinPass:first').focus(); }); 你可以在这里测试. Next 也可以有选择器。 $(this).next('input');

在简单的图像幻灯片放映中实现 jQuery .next()

jsFiddle 在这里：http://jsfiddle.net/qBQD4/ 这真的很简单；我想要右箭头向前移动图像，左箭头在简单的幻灯片中向后移动它们。我有多个

jQuery - 如果前一个元素有特定的类则隐藏

我想隐藏所有 class="csc-content"，其中前一个兄弟是 h4 class="faq"。 更新 错误：我认为这是错误的......之前的兄弟姐妹不是h4。但我希望你明白所有“

Jquery Select element 2 positions further - .next().next() 的另一种方式

我正在寻找一种方法来选择一个 div 元素，该元素不是通过单击功能“选择”的元素的直接下一个元素。 （兄弟姐妹） 我正在寻找一种方法来选择一个 div 元素，它不是通过单击功能“选择”的元素的直接下一个元素。 <div id="click">(siblings)</div><div>text</div><div id="get this one"></div> 现在我想选择 ID 为“get this one”的那个——在我的代码中这个 ID 不可用。所有的 div 都有相同的类，并且有兄弟姐妹。 我可以通过$(this).next().next()选择第三个，但我认为这不是最好的方法。 在被点击的那个之前也可以有 divs - 所以它不一定是第一个。 我尝试了:nth-child选择器但没有找到解决方案。 稍后我也可能想在单击一个之后选择第 13 个（或第 23 个、第 65 个等等）。这意味着我想对这个问题有一个相当动态的解决方案。 感谢您的帮助， 菲尔 您可以将 .nextAll() 与 .eq() 一起用于您的动态方法，如下所示： $(this).nextAll().eq(1) //0 based index, this would be .next().next() 这将使您能够让n兄弟姐妹前进，这似乎就是您所追求的。 看来$(this).parent().find('div').eq(2).attr('id')应该行得通。 更新（添加了 find('div') ）

Jquery 选择器使用 $(this) 通过 next() 处理下一个元素

我正在尝试计算利润百分比并将值写入下一个输入。使用 jquery，jstl 我正在尝试计算利润百分比并将值写入下一个输入。使用 jquery 和 jstl <div id="quantityHoleForPercentage"> <form:input path="quantity11Profit" id="quantity11Profit" cssClass="smaller" /> </div> <div id="quantityHoleForPercentage"> <form:input path="quantity11Price" id="quantity11Price" cssClass="smaller" /> </div> 我正在监听 quantity12Profit 上的变化事件，在我得到这个值后，我将它乘以一个常数并将结果写入 quantity11Price 但是在 jquery 中，当我更改 quantity11Profit 输入时，我无法在场景中处理 $("#quantityHoleForPercentage input") 我应该能够使用 $(this).next(); 处理 quantity11Price 但我不能。我这样做是因为我有太多这样的输入。 这是我的 jquery 代码，请在我错误的地方或其他方式提供一些建议 非常感谢 $("#quantityHoleForPercentage input").change(function(){ var needless=$(this).attr('id'); var willWriteToPriceInput= $(this).val(); var priceInput=$(this).next(); priceInput.val(willWriteToPriceInput); }); idquantityHoleForPercentage在您的html中出现两次，更改它以使控件的id变得唯一。 试试这个： $("#quantityHoleForPercentage input[id$=Profit]").change(function(){ var willWriteToPriceInput= $(this).val(); var priceInput = $(this).parent().next() priceInput.val(willWriteToPriceInput); }); 但是尝试在您的 html 和 jquery 中将 quantityHoleForPercentage 从 ID 更改为 Class

：tbody 标签上的空选择器

给出下表： 给出下表： <table id="incidents"> <thead> <tr> <th></th> </tr> </thead> <tbody> </tbody> </table> 使用 jQuery，以下评估为 false： $("#incidents tbody").is(":empty") 我想用CSS把内容设置成一条消息： #incidents tbody:empty { content: "<tr>message foo</tr>"; } :empty选择器可以应用于tbody吗？ 不，不幸的是，在这种情况下，tbody 中的缩进和换行符阻止它与 :empty 匹配。这适用于 CSS 和 jQuery，据我所知 :empty 的行为相同，以及 jQuery 的 :parent，相当于 :not(:empty)（very 糟糕的选择名）。 此外，您不能使用 CSS content 向 DOM 中添加元素。您需要在 jQuery 或服务器端执行此操作：检查 tbody 是否有任何行，如果没有，请添加该行。 如果你使用 jQuery，你可以使用这个： var tbody = $("#incidents tbody"); if (tbody.children().length == 0) { tbody.html("<tr>message foo</tr>"); } 在这种情况下，tbody 包含空白作为内容，所以它不会工作 ：空 :empty 伪类表示任何没有子元素的元素 全部。只有元素节点和文本（包括空格）是 经过考虑的。注释或处理指令不影响是否 元素是否为空。 此外，:content 只能与 :before 或 :after 伪元素一起使用 内容 CSS 属性与 ::before 和 ::after 一起使用 伪元素在元素中生成内容。插入的对象 使用 content 属性是匿名替换元素。 如果你想使用 :empty 那么你需要像这样给出 tbody 语法： <tbody></tbody> 正如您定义的那样， :empty 不会检查它，因为它有一个新行。 按照我告诉你的那样定义tbody。 您也可以使用.html()来检查条件： if(!$("#incidents tbody").html()) {} 参考： 如何使用 jQuery 检查 HTML 元素是否为空？ <tbody> 不是空的，因为它包含空格。你必须使用过滤功能来解决这个问题： $("#incidents tbody").filter(function() { return !$.trim($(this).text()); }).append('<tr>message foo</tr>'); 或者数孩子的数量： $("#incidents tbody").filter(function() { return !$(this).children().length; }).append('<tr>message foo</tr>'); 仅供参考：您可以使用以下 jQuery 选择器来选择具有空 tbody 的表，而不依赖于表元素的 id： $("table:not(:has(>tbody>tr))") 使用 $("#incidents tbody").html() 然后检查你得到了什么。 2023年只有CSS： tbody:not(:has(>tr)) { position: relative; height: 10em; } tbody:not(:has(>tr)):before { display: block; position: absolute; content: 'message foo'; color: #aaa; top: calc(50% - 0.5em); left: 50%; transform: translate(-50%, -50%); } 检查这个： <table id="incidents"> <thead> <tr> <th></th> </tr> </thead> <tbody></tbody> </table>

获取选择器的文本，放入if语句

我正在尝试获取此选择器的文本（搜索结果中视频的上传日期）： #metadata-line > span:nth-child(4) 文本是这样的：“x 前上传”。 tha 中的 x

使用 jQuery 获取集合中被点击元素的索引

如何在下面的代码中获取点击项目的索引？ $('选择器').click(函数(事件){ // 获取点击项集合中的索引 ... }); 使用 Firebug，我看到了这个：

jQuery 选择器值转义

我有一个包含一系列选项的下拉列表： a'b] eas... 我有一个包含一系列选项的下拉列表： <select id=SomeDropdown> <option value="a'b]&lt;p>">a'b]&lt;p></option> <option value="easy">easy</option> <select> 注意选项值/文本包含一些讨厌的东西： 单引号 右方括号 转义 html 我需要删除 a'b] 选项，但我没有写选择器。都不是： $("#SomeDropdown >option[value='a''b]&lt;p>']"); 或 $("#SomeDropdown >option[value='a\'b]&lt;p>']"); 正在返回选项。 使用“value=”选择器时转义值的正确方法是什么？ 我用这个函数来转义 jquery 选择器。它基本上避开了所有有问题的东西，但可能过于激进。 函数 escapeStr(str) { 如果（海峡） 返回 str.replace(/([ #;?%&,.+*~\':"!^$[\]()=>|\/@])/g,'\$1'); 返回海峡； } 我不认为你可以。它应该是： #SomeDropdown >option[value='a\'b]<p>'] 这确实可以用作 CSS 选择器（在现代浏览器中）。用 JavaScript 字符串文字表示，您自然需要另一轮转义： $("#SomeDropdown >option[value='a\\'b]<p>']") 但这在 jQuery 中不起作用，因为它的选择器解析器不完全符合标准。它使用此正则表达式来解析 value 条件的 [attr=value] 部分： (['"]*)(.*?)\3|)\s*\] 是包含开场引号的组，奇怪的是允许有多个开场引号，或者根本没有开场引号。这 。*？然后可以解析任何字符，包括引号，直到它遇到第一个']'字符，结束匹配。没有反斜杠转义 CSS 特殊字符的规定，因此您无法在 jQuery 中匹配任意字符串值。 （再一次，正则表达式解析器输了。） 但好消息是您不必依赖 jQuery 选择器；您可以使用非常好的 DOM 方法，特别是 HTMLSelectElement.options: var select= document.getElementById('SomeDropdown'); for (var i= select.options.length; i-->0;) { if (select.options[i].value=="a'b]<p>") { // do something with option } } 这比让 jQuery 费力地解析和实现您的选择器要简单和快很多倍，而且您可以使用您喜欢的任何值字符串，而不必担心转义特殊字符。 将.filter()与自定义功能一起使用。 txt 应该包含您讨厌的字符串，或者您可以将 indexOf 替换为您选择的任何其他函数。 $("#SomeDropdown option") .filter(function(i){ return $(this).attr("value").indexOf(txt) != -1; }) .remove(); 我发现你可以使用 \ 来转义选择器。将其视为正则表达式的一个 \ 和从正则表达式逃逸的一个。 例子： $(this).find('input[name=user\\[1\\]\\[name\\]]').val(); 如果您尝试以编程方式进行转义，则只需要一组斜杠。这行不通： var key = 'user[1][name]'; $(this).find('select[name=' + key + ']'); 但这将： var key = 'user\[1\]\[name\]'; $(this).find('select[name=' + key + ']'); 这也是： $(this).find('select[name=user\\[1\\]\\[name\\]]'); 您可以使用此 javascript 构建正确转义的选择器： if(key.indexOf('[') !== -1) { key = key.replace(/([\[\]])/g, "\\$1"); } 这是一个显示一些奇怪行为的 JS Fiddle： http://jsfiddle.net/dH3cV/ 问题是由于HTML实体； “&lt;”被浏览器视为“<”。 bobince提供的例子也是如此；请注意，以下不适用于 Win + FF3 上的 jQuery 1.32： var select= document.getElementById('SomeDropdown'); for (var i= select.options.length; i-->0;) { if (select.options[i].value=="a'b]&lt;p>") { alert('found it'); } } 但是，将实体改成字面量确实会找到想要的值： var select= document.getElementById('SomeDropdown'); for (var i= select.options.length; i-->0;) { if (select.options[i].value=="a'b]<p>") { alert('found it'); } } 当然，这里有一个问题，因为您指定的值不是您要查找的确切值。这也可以通过添加辅助函数来纠正： function html_entity_decode(str) { var decoder = document.createElement('textarea'); decoder.innerHTML = str; return decoder.value; } 现在在一起： var srcValue = html_entity_decode("a'b]&lt;p>"); var select= document.getElementById('SomeDropdown'); for (var i= select.options.length; i-->0;) { if (select.options[i].value == srcValue) { alert('found it'); } } 现在，您正在搜索的输入值与选择元素的值完全匹配。 这也可以使用 jQuery 方法编写： var srcValue = html_entity_decode("a'b]&lt;p>"); $($('#SomeDropdown').attr('options')).each(function() { if (this.value == srcValue) { $(this).remove(); } }); 最后，作为一个插件，因为它们很容易制作： jQuery.fn.removeByValue = function( val ) { var decoder = document.createElement('textarea'); decoder.innerHTML = val; var srcValue = decoder.value; $( $(this)[0].options ).each(function() { if (this.value == srcValue) { $(this).remove(); } }); return this; }; $('#SomeDropdown').removeByValue("a'b]&lt;p>"); jQuery.escapeSelector() 是在 jQuery 3 中引入的。要将选项与问题中的值 a'b]&lt;p> 匹配，您可以使用： $("#SomeDropdown > option[value='" + $.escapeSelector("a'b]<p>") + "']") 一般来说，使用 jQuery.escapeSelector() 是像 $('#' + $.escapeSelector(id)) 这样的好习惯，其中变量 id 可能包含特殊的 CSS 符号。 jQuery 的论坛对此有一个很好的解决方案： https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-符号/ 他们建议的这个略微修改的版本也是空安全的。 function jqid (id) { return (!id) ? null : '#' + id.replace(/(:|\.|\[|\]|,)/g, '\\$1'); } 安全转义CSS字符串并不容易，不能用简单的正则表达式来完成。 您可以使用CSS.escape() . 并非所有浏览器都支持此功能，但存在 polyfill.

Tampermonkey 脚本看不到 ajax 加载的元素

我正在尝试在 Chrome 中为我在工作中一直使用的网站编写 Tampermonkey 脚本。我希望脚本删除某个类或标题的按钮上的禁用属性。这

我不能用查询选择器全部选择相同的类元素。我使用 VS 代码编辑器

在 javascript 文件中，我使用查询选择器选择相同的类元素都是这样的...... const buttons = document.querySelectorAll(".button"); 在html文件中，我这样写... 在 javascript 文件中，我使用查询选择器选择相同的类元素都是这样的... const buttons = document.querySelectorAll(".button"); 在html文件中，我这样写... <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> </head> <body> <script src="index.js"></script> <button class="button" value="rock" style="background-color: rgb(240, 20, 20)"></button> <button class="button" value="paper" style="background-color: rgb(20, 240, 20)"></button> <button class="button" value="scissor" style="background-color: rgb(20, 20, 240)"></button> </body> </html> 选择元素后，我尝试控制“按钮”。但是我得到的是nodelist(0)。您可以在下图中看到它... 我看了所有的教程，学会了怎么做。我做了完全一样的，但结果不是我所期望的。谁能告诉我是我弄错了还是需要补充什么？ 导入 js 脚本文件页脚。 等待 DOM 加载 document.addEventListener("DOMContentLoaded", function(){ const buttons = document.querySelectorAll(".button"); console.log(buttons); }); <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> </head> <body> <button class="button" value="rock" style="background-color: rgb(240, 20, 20)"></button> <button class="button" value="paper" style="background-color: rgb(20, 240, 20)"></button> <button class="button" value="scissor" style="background-color: rgb(20, 20, 240)"></button> <script src="index.js"></script> </body> </html>

如何为这些轮播按钮添加事件监听器？

我严格按照 Youtube 教程进行操作，但似乎我无法使旋转木马正常工作，但我真的不知道为什么。我一直在尝试像其他类一样用不同的标识符来解决它，...