可以在jQuery中使用选择器来匹配文档中的一组元素。实现了大多数CSS选择器，以及一组自定义选择器。
我有一个移动菜单，单击图标时会打开该菜单。大多数菜单链接都指向其他页面，但也有带有 href='#xxxx' 属性的本地链接，其链接具有相同的页面 ID...
我想要一些 jQuery 代码，当我单击文本框时，它可以让我找到控件的标签...所以在我的 HTML 中我有这个： 我想要一些 jQuery 代码，当我单击文本框时，它可以让我找到控件的标签...所以在我的 HTML 中我有这个： <label id="ctl00_WebFormBody_lblProductMarkup" for="ctl00_WebFormBody_txtPriceAdjustment">This Is My Label Value</label> <input type="text" style="width:29px;" onclick="alert('label value here');" title="Here is a title" id="ctl00_WebFormBody_txtPriceAdjustment" maxlength="3" name="ctl00$WebFormBody$txtPriceAdjustment"> 因此，当我单击文本框时，我想（例如）使用标签内的文本发出警报 - 所以在这种情况下，它会警报“这是我的标签值” 希望这是有道理的:) 像[]一样使用属性选择器[for='+ this.id +']，其中this.id是当前focus编辑的label的ID $("input").on("focus", function() { const labelText = $(`label[for="${this.id}"]`).text(); console.log( labelText ); }); <label for="inp">This Is My Label Value</label> <input id="inp" type="text"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> 在这样的 HTML 代码中： <label for="input-email">Email</label> <input type="text" name="input-email" value="" /> 你可以找到这样的标签内容： $('label[for="input-email"]').html(); $("#ctl00_WebFormBody_txtPriceAdjustment").bind("click",function(){ alert($("label [for=" + this.id + "]").html()); }); 或者可能 alert($(this).closest("label").html()); 根据您的标记，您也许也可以选择下一个或上一个兄弟姐妹。 试试这个： $('input[type=text]').focus(function(){ alert($('label[for=' + $(this).attr('id') + ']').html()); }); $('#ctl00_WebFormBody_txtPriceAdjustment').click(function() { alert($('#ctl00_WebFormBody_lblProductMarkup').text()); }); 使用 javascript 来完成 <script type="text/javascript"> function displayMessage() { alert(document.getElementById("ctl00_WebFormBody_lblProductMarkup").innerHTML); } </script> <label id="ctl00_WebFormBody_lblProductMarkup" for="ctl00_WebFormBody_txtPriceAdjustment">This Is My Label Value</label> <input type="text" style="width:29px;" onclick="displayMessage()" title="Here is a title" id="ctl00_WebFormBody_txtPriceAdjustment" maxlength="3" name="ctl00$WebFormBody$txtPriceAdjustment">
JavaScript Click 不适用于 Google 翻译图像
我尝试编写 JavaScript 扩展来翻译 Windows 剪贴板中的图像。 网站页面网址：https://translate.google.fr/?hl=fr&sl=auto&tl=fr&op=images 图片已经...
3cx 更改 WordPress Functions.php 中的气泡按钮样式 - 向上移动异步按钮并在等待创建的异步 dom 获取后对其进行样式设置
两天以来，我一直在努力解决聊天气泡覆盖我的主题底部登录/退出网络应用栏的问题： 尝试： 在Wordpress中修改子style.css和functions.php
3cx 更改气泡按钮样式 - 向上移动异步按钮并在等待创建异步 dom 的获取后为其设置样式
两天以来，我一直在努力解决聊天气泡覆盖我的主题底部登录/退出网络应用栏的问题： 尝试： 在Wordpress中修改子style.css和functions.php
3cx 更改气泡按钮样式 - 向上移动异步按钮并设置其样式等待创建异步 dom
两天以来，我一直在努力解决聊天气泡覆盖我的主题底部登录/退出网络应用栏的问题： 尝试： 在Wordpress中修改子style.css和functions.php
主题风格不适用 在 style.css 中修改了 主题风格不适用 在style.css中修改了 `/* Theme Name: Alukas child Theme URI: Description: Tema child di Alukas Author: admin Author URI: https://monbi.it Template: alukas Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html /* == Add your own styles below this line == --------------------------------------------*/ #wplc-chat-button {bottom: 100px!important} ` function add_custom_js() { ?> <script type="text/javascript"> function querySelectorAllShadows(selector, el = document.body) { // recurse on childShadows /** * Finds all elements in the entire page matching `selector`, even if they are in shadowRoots. * Just like `querySelectorAll`, but automatically expand on all child `shadowRoot` elements. * @see https://stackoverflow.com/a/71692555/2228771 */ const childShadows = Array.from(el.querySelectorAll('*')). map(el => el.shadowRoot).filter(Boolean); // console.log('[querySelectorAllShadows]', selector, el, `(${childShadows.length} shadowRoots)`); const childResults = childShadows.map(child => querySelectorAllShadows(selector, child)); // fuse all results into singular, flat array const result = Array.from(el.querySelectorAll(selector)); return result.concat(childResults).flat(); } jQuery(document).ready(function(){ setTimeout(function() { // sposta la bubble chat // Sposta il div #callus-container var allMatches = querySelectorAllShadows('#wp-live-chat-by-3CX'); if(allMatches && allMatches.length > 0){ var callusContainer = jQuery(allMatches[0]); // Prendi il primo match if(window.innerWidth <= 430) { callusContainer.css({'position':'fixed','bottom':'105px','right':'5px'}); } } }, 3000); // 3 secondi di ritardo }); </script> <?php } add_action('wp_head', 'add_custom_js', 100);
我第一次尝试进行网络抓取，以便在假期中获得最优惠的价格。 （我的目的是拥有一个 Telegram 机器人，每天检查酒店日历中的特定日期并搜索...
将 jQuery 元素保存到 var 是否会导致在使用时重新查找该元素？
所以，我有一些 JavaScript/jQuery，如下所示： var $foo = $('#bar'); $foo.hide(); 我一直在假设 jQuery 对给定选择器进行操作并保存结果的情况下进行操作...
</desc> <question vote="0"> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Shopping List</title> <style> .btn { background-color: #333; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; } .btn-clear { margin-top: 20px; width: 100%; font-size: 16px; background-color: transparent; color: #333; border: 1px solid #ccc; border-radius: 5px; padding: 10px 20px; cursor: pointer; } </style> </head> <body> <button class="remove-item btn-link text-red"> <i class="fa-solid fa-xmark"></i> </button> <button id="clear" class="btn-clear"><b>Clear All</b></button> <script> const clearButton = document..querySelector(('button')); clearButton.style.color = 'red'; </script> </body> </html> </code></pre> </question> <answer tick="false" vote="0"> <p>您可以使用按钮 id 来完成此任务</p> <p>示例-></p> <pre><code>const clearButton = document.querySelector('#clear'); clearButton.style.color = 'red'; </code></pre> </answer> </body></html>
我在表格中有一系列输入和选择元素： <... 我在表格中有一系列输入和选择元素： <table id='tbl-edit-company' class='tbl-form tbl-contact-form'> <tbody> <tr> <td><label for='edit-company-company-name'>Company Name</label></td> <td><input id='edit-company-company-name' class='contact-input' name='edit-company-company-name' type='textbox' maxlength='50' value=''></td> </tr> <tr> <td><label for='cmbo-edit-company-business-type'>Business Type</label></td> <td> <select id='cmbo-edit-company-business-type' class='contact-combo' name='cmbo-edit-company-business-type'> <option value='0'> - </option> <option value='1'>Construction</option> <option value='2'>Garage</option> <option value='3'>Financial</option> <select> </td> </tr> <tr> <td><label for='edit-company-branch-name'>Branch</label></td> <td><input id='edit-company-branch-name' class='contact-input' name='edit-company-branch-name' type='textbox' maxlength='20'><div id='found-branches'></div></td> </tr> <tr> <td><label for='edit-company-phone'>Phone Number</label></td> <td><input id='edit-company-phone' class='phone-input' name='edit-company-phone' type='textbox' maxlength='20'></td> </tr> <tr> <td><label for='edit-company-email'>Email</label></td> <td><input id='edit-company-email' class='email-input' name='edit-company-email' type='textbox' maxlength='50'></td> </tr> </tbody> </table> 我希望回车符表现得像制表符一样，移动到下一个字段。 我有： $('#tbl-edit-company tbody').on('keydown', 'input, select', function(e) { if (e.keyCode == 13) { event.preventDefault(); $(this).next().focus(); } }); 我知道节点结构对于 $(this).next().focus(); 来说太复杂了；工作，但是我需要什么parent()、next()、find()组合才能工作？ 我已经多次尝试过各种组合，才来这里问！！ 解决此问题的一种方法是向所有 input/select 字段添加公共类。然后，使用 .index() 获取正在聚焦的类的索引，并使用 :eq() 聚焦具有相同类的下一个字段。 演示代码： $('#tbl-edit-company tbody').find('input,select').addClass('something'); //adding this class... to all input/select $('#tbl-edit-company tbody').on('keydown', 'input, select', function(e) { var index_ = $('.something').index(this) //get index of class if (e.keyCode == 13) { $('#tbl-edit-company tbody').find(`.something:eq(${index_ + 1})`).focus(); //focus on next class + 1 } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id='tbl-edit-company' class='tbl-form tbl-contact-form'> <tbody> <tr> <td><label for='edit-company-company-name'>Company Name</label></td> <td><input id='edit-company-company-name' class='contact-input' name='edit-company-company-name' type='textbox' maxlength='50' value=''></td> </tr> <tr> <td><label for='cmbo-edit-company-business-type'>Business Type</label></td> <td> <select id='cmbo-edit-company-business-type' class='contact-combo' name='cmbo-edit-company-business-type'> <option value='0'> - </option> <option value='1'>Construction</option> <option value='2'>Garage</option> <option value='3'>Financial</option> <select> </td> </tr> <tr> <td><label for='edit-company-branch-name'>Branch</label></td> <td><input id='edit-company-branch-name' class='contact-input' name='edit-company-branch-name' type='textbox' maxlength='20'> <div id='found-branches'></div> </td> </tr> <tr> <td><label for='edit-company-phone'>Phone Number</label></td> <td><input id='edit-company-phone' class='phone-input' name='edit-company-phone' type='textbox' maxlength='20'></td> </tr> <tr> <td><label for='edit-company-email'>Email</label></td> <td><input id='edit-company-email' class='email-input' name='edit-company-email' type='textbox' maxlength='50'></td> </tr> </tbody> </table>
我有这些按钮，它们实际上是网格中的 p 元素，它们都具有相同的类。我想更改用户单击的 p 元素的颜色。如何添加活跃的 cl...
为什么我的 JQuery 选择器返回 n.fn.init[0]，它是什么？
我有一组动态生成的复选框，其中每个复选框都有一个与数据库整数 id 相对应的 data-id 属性。当我用要编辑的对象填充 html 表单时，有一个...
HTML： HTML： <div id="panel"> <table> <tr> <td><input id="Search_NazovProjektu" type="text" value="" /></td> </tr> <tr> <td><input id="Search_Popis" type="text" value="" /></td> </tr> </table> </div> 我需要选择特定 div 中的所有输入。 这不起作用： var i = $("#panel > :input"); 使用时不带大于号： $("#panel :input"); >仅表示元素的direct子元素，如果您想要所有子元素，无论深度如何，只需使用空格即可。 你需要 var i = $("#panel input"); 或，取决于您到底想要什么（见下文） var i = $("#panel :input"); > 将仅限于儿童，您想要所有后代。 编辑：正如尼克指出的，$("#panel input")和$("#panel :input)之间存在细微的差别。 第一个只会检索 input 类型的元素，即 <input type="...">，但不检索 <textarea>、<button> 和 <select> 元素。谢谢尼克，我自己也不知道这一点，并相应地纠正了我的帖子。留下这两个选项，因为我猜 OP 也不知道这一点，并且 - 从技术上讲 - 要求输入......:-) “find”方法可用于获取已缓存的容器的所有子输入，以节省再次查找的次数（而“children”方法将仅获取直接子项）。例如 var panel= $("#panel"); var inputs = panel.find("input"); 如果您使用的是 Ruby on Rails 或 Spring MVC 等框架，您可能需要使用带方括号或其他字符的 div，这是不允许的，您可以使用 document.getElementById，如果您有多个具有相同内容的输入，此解决方案仍然有效类型。 var div = document.getElementById(divID); $(div).find('input:text, input:password, input:file, select, textarea') .each(function() { $(this).val(''); }); $(div).find('input:radio, input:checkbox').each(function() { $(this).removeAttr('checked'); $(this).removeAttr('selected'); }); 此示例展示了如何清除输入，对于您的示例，您需要更改它。 这是我的方法： 您可以在其他活动中使用它。 var id; $("#panel :input").each(function(e){ id = this.id; // show id console.log("#"+id); // show input value console.log(this.value); // disable input if you want //$("#"+id).prop('disabled', true); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="panel"> <table> <tr> <td><input id="Search_NazovProjektu" type="text" value="Naz Val" /></td> </tr> <tr> <td><input id="Search_Popis" type="text" value="Po Val" /></td> </tr> </table> </div> var i = $("#panel input"); 应该可以:-) > 只会获取直接子项，没有子项的子项 : 用于使用伪类，例如。 ：悬停等 您可以在此处阅读有关伪类的可用 css 选择器的信息：http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors 不完全是您所要求的，但可能正是您所追求的。 我结合了我在项目中经常使用的这个片段： $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; 使用以下命令获取我的“表单”元素名称和值的 json 字符串。 var form_data = JSON.stringify($('table#my-table :input').serializeObject()); console.log(form_data); // Outputs {"input_name_1":"My Cool Value","input_name_2":"Another cool value"}
我正在寻找有关在 jQuery 选择器中使用通配符或正则表达式（不确定确切的术语）的文档。 我自己找过这个，但找不到信息......
每次点击网页上除特定对象之外的任何内容时（菜单“树水平线”按钮，类名为“navbutton”），我都尝试启动一个操作，例如t...
目前，我用于选择第 2 列和第 7 列的 jQuery 选择器是： $("table tr td:nth-child(2) span:contains('something'), table tr td:nth-child(7) span:contains('something')") 是...
下面是我尝试抓取一个小数据集的尝试 - 我遇到了一个问题，没有数据被拉出，当预览在 docker 中显示时，我的表不会显示，只有列名。我...
这是我的小提琴： 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);
我有一个无序列表，其中的列表项数量未知，顺序未知。 我需要找到带有 .colspan 类的列表项，看看它后面的项目是否也有那个类，然后是...