jquery-selectors 相关问题

JQuery .find 与多个选择器

我遇到了 Jquery items[c] 被明确定义为 HTMLElement 的问题，但是当我将 .find 与多个选择器一起使用时，我收到此错误： 类型错误：X[g].exec 不是函数 http://code.jquery...

将所有 jQuery 选择器重新映射到 ShadowRoot

根据客户的要求，我们正在尝试用带有 Shadow DOM 的 Web 组件完全替换 iframe 元素。 计划是，应嵌入的网站通过 vi 获取...

包含属性和同级选择器的 jQuery 选择器不起作用

我有一个移动菜单，单击图标时会打开该菜单。大多数菜单链接都指向其他页面，但也有带有 href='#xxxx' 属性的本地链接，其链接具有相同的页面 ID...

使用 jQuery 查找选定控件或文本框的标签

我想要一些 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

3cx 更改气泡按钮样式 - 向上移动

主题风格不适用 在 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);

查找嵌套的nodeList <span>

我第一次尝试进行网络抓取，以便在假期中获得最优惠的价格。 （我的目的是拥有一个 Telegram 机器人，每天检查酒店日历中的特定日期并搜索...

将 jQuery 元素保存到 var 是否会导致在使用时重新查找该元素？

所以，我有一些 JavaScript/jQuery，如下所示： var $foo = $('#bar'); $foo.hide(); 我一直在假设 jQuery 对给定选择器进行操作并保存结果的情况下进行操作...

如果我们有两个名为“按钮”的 html 元素，我们如何选择特定元素并使用 javascript 使用查询选择器向其添加样式</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>

</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>

jQuery next 在表中输入

我在表格中有一系列输入和选择元素： <... 我在表格中有一系列输入和选择元素： <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>

单个类元素 jQuery 的活动类

我有这些按钮，它们实际上是网格中的 p 元素，它们都具有相同的类。我想更改用户单击的 p 元素的颜色。如何添加活跃的 cl...

为什么我的 JQuery 选择器返回 n.fn.init[0]，它是什么？

我有一组动态生成的复选框，其中每个复选框都有一个与数据库整数 id 相对应的 data-id 属性。当我用要编辑的对象填充 html 表单时，有一个...

如何获取div元素的所有子输入（jQuery）

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 选择器正则表达式

我正在寻找有关在 jQuery 选择器中使用通配符或正则表达式（不确定确切的术语）的文档。 我自己找过这个，但找不到信息......

为什么这个 jQuery 选择器对我不起作用？

每次点击网页上除特定对象之外的任何内容时（菜单“树水平线”按钮，类名为“navbutton”），我都尝试启动一个操作，例如t...

如何使用 jQuery 选择多个单独的表列？

目前，我用于选择第 2 列和第 7 列的 jQuery 选择器是： $("table tr td:nth-child(2) span:contains('something'), table tr td:nth-child(7) span:contains('something')") 是...

从动态 javascript 网页抓取数据的问题

下面是我尝试抓取一个小数据集的尝试 - 我遇到了一个问题，没有数据被拉出，当预览在 docker 中显示时，我的表不会显示，只有列名。我...