jquery-selectors 相关问题

可以在jQuery中使用选择器来匹配文档中的一组元素。实现了大多数CSS选择器，以及一组自定义选择器。

我想实现一个将选择器转换为 HTML 的 jQuery 插件。我知道这两种语法之间的映射是多对多的，但是简单的选择器很容易转换为 HTML。

javascript jquery jquery-plugins jquery-selectors

回答 2 投票 0

我在 codeply 上发现了一个示例，其中包含以下行： $('[id^=carousel-selector-]').click( function(){ 我认为这与html中的行有关：我在 codeply 上发现了一个示例，其中包含以下行： $('[id^=carousel-selector-]').click( function(){ 我认为这与html中的行有关： <li> <a id="carousel-selector-0" class="selected"> 但是'[id^=carousel-selector-]'到底是什么意思？它是属性以选择器开头。它将选择 id 以 carousel-selector- 开头的所有元素考虑 html， <a id="carousel-selector-0" class="selected">one</a> <a id="carousel-selector-1" class="selected">one</a> <a id="carousel-selector-2" class="selected">one</a> <a id="testcarousel-selector-2" class="selected">one</a> 然后$('[id^=carousel-selector-]').将返回前3个锚元素，因为它的id以carousel-selector-开头 ^ 以选择器开始 $ 以选择器结束 * 是包含选择器查询将单击 id 以 carousel-selector- 开头的所有元素。例如 <div id="carousel-selector-1">click me</div> <p id="carousel-selector-2">click me</p> <h1 id="carousel-selector-3">click me</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function () { $('[id^=carousel-selector-]').click(function () { alert('ok'); }); }); </script> 存在三个不同的 html 元素，它们具有随机 id，但以相同的 id 名称开头。所以这将找到它们并做你想做的事情或者您也可以隐藏页面加载时的所有项目或执行任何您想要的操作 $('[id^=carousel-selector-]').hide(); 因此，这将搜索 id 以 carousel-selector- 开头的所有项目，并执行相应操作这意味着；选择 ID 以 carousel-selector- 开头的元素您可能还会遇到类似的选择器id*=carousel-selector-，这意味着；选择 ID 为 contains carousel-selector- 的元素

jquery jquery-selectors

回答 3 投票 0

当父元素悬停时更改子元素的 CSS

首先，我假设这对于 CSS3 来说太复杂了，但是如果某个地方有解决方案，我很乐意采用它。 HTML 非常简单。首先，我假设这对于 CSS3 来说太复杂了，但是如果某个地方有解决方案，我很乐意采用它。 HTML 非常简单。 <div class="parent"> <div class="child"> Text Block 1 </div> </div> <div class="parent"> <div class="child"> Text Block 2 </div> </div> 子div设置为display:none；默认情况下，但随后更改为 display:block;当鼠标悬停在父div上时。问题是这个标记出现在我网站上的几个地方，我只希望当鼠标位于其父级上方时显示子级，而不是当鼠标位于任何其他父级上方时显示子级（它们都具有相同的类）姓名且无 ID）。我尝试过使用 $(this) 和 .children() 但没有成功。 $('.parent').hover(function(){ $(this).children('.child').css("display","block"); }, function() { $(this).children('.child').css("display","none"); }); 为什么不直接使用CSS？ .parent:hover .child, .parent.hover .child { display: block; } 然后添加不支持 :hover 的 IE6 JS（例如在条件注释中）： jQuery('.parent').hover(function () { jQuery(this).addClass('hover'); }, function () { jQuery(this).removeClass('hover'); }); 这是一个简单的例子：Fiddle .child{ display:none; } .parent:hover .child{ display:block; } /*just to desgin */ .parent { border: 1px solid #ddd; min-height: 40px; padding: 10px } <div class="parent"> parent 1 <div class="child"> Text Block 1 </div> </div> <br><br> <div class="parent"> parent 2 <div class="child"> Text Block 2 </div> </div> 不需要使用JavaScript或jquery，CSS就足够了： .child{ display:none; } .parent:hover .child{ display:block; } 查看演示 .parent:hover > .child { /*do anything with this child*/ } 使用toggleClass()。 $('.parent').hover(function(){ $(this).find('.child').toggleClass('color') }); 其中 color 是班级。您可以根据自己的喜好设计类，以实现您想要的行为。该示例演示了如何在鼠标移入和移出时添加和删除类。查看工作示例此处。不确定是否有可怕的理由这样做，但它似乎在最新版本的 Chrome/Firefox 上与我一起工作，页面上有相当多的元素没有任何明显的性能问题。 *:not(:hover)>.parent-hover-show{ display:none; } 但是这样，您所需要做的就是将 parent-hover-show 应用于一个元素，其余的就完成了，并且您可以保留您想要的任何默认显示类型，而不必总是“阻止”或为每种类型创建多个类。要从 css 更改它，您甚至不需要设置子类 .parent > div:nth-child(1) { display:none; } .parent:hover > div:nth-child(1) { display: block; } 斯蒂芬的答案是正确的，但这是我对他的答案的改编： HTML <div class="parent"> <p> parent 1 </p> <div class="child"> Text Block 1 </div> </div> <div class="parent"> <p> parent 2 </p> <div class="child"> Text Block 2 </div> </div> CSS .parent { width: 100px; min-height: 100px; color: red; } .child { width: 50px; min-height: 20px; color: blue; display: none; } .parent:hover .child, .parent.hover .child { display: block; } jQuery //this is only necessary for IE and should be in a conditional comment jQuery('.parent').hover(function () { jQuery(this).addClass('hover'); }, function () { jQuery(this).removeClass('hover'); }); 您可以看到这个示例在 jsFiddle 上工作。我有一个我认为更好的解决方案，因为它可以扩展到更多级别，想要多少级别都可以，而不仅仅是两个或三个。我使用边框，但也可以使用任何想要的样式，例如背景颜色。有了边框，我们的想法是：只有一个div具有不同的边框颜色，即鼠标所在位置的div，不在任何父级上，也不在任何子级上，因此只能看到这样的div边框具有不同的颜色，而其余部分保持白色。您可以在以下位置进行测试：http://jsbin.com/ubiyo3/13 这是代码： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Hierarchie Borders MarkUp</title> <style> .parent { display: block; position: relative; z-index: 0; height: auto; width: auto; padding: 25px; } .parent-bg { display: block; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; border: 1px solid white; z-index: 0; } .parent-bg:hover { border: 1px solid red; } .child { display: block; position: relative; z-index: 1; height: auto; width: auto; padding: 25px; } .child-bg { display: block; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; border: 1px solid white; z-index: 0; } .child-bg:hover { border: 1px solid red; } .grandson { display: block; position: relative; z-index: 2; height: auto; width: auto; padding: 25px; } .grandson-bg { display: block; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; border: 1px solid white; z-index: 0; } .grandson-bg:hover { border: 1px solid red; } </style> </head> <body> <div class="parent"> Parent <div class="child"> Child <div class="grandson"> Grandson <div class="grandson-bg"></div> </div> <div class="child-bg"></div> </div> <div class="parent-bg"></div> </div> </body> </html> 如果您使用 Twitter Bootstrap 样式和基本 JS 作为下拉菜单： .child{ display:none; } .parent:hover .child{ display:block; } 这是创建粘性下拉菜单所缺少的部分（这并不烦人）行为是：单击时保持打开状态，再次单击页面上其他任何位置时关闭当鼠标滚出菜单元素时自动关闭。对我有用的是 nth-of-type 来定位特定元素、SVG 图标，而不是使用 display:none;为了避免以后找不到它，我使用填充颜色作为背景颜色，在本例中为白色，然后使用 css 定位父级并使用 :nth-type-of(1) 直接查找 SVG 元素 HTML <div class="feature-col"> <div class="feature-icon bg-primary bg-dark" style="border:0.125em white"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="white" class="bi bi-laptop" viewBox="0 0 16 16"><path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z"></path> </svg> </div> <h5>Website Design and Hosting</h5> <p>Some text in here that is a child element as well...</p> <a href="javascript:void(0);" class="icon-link">Call to action</a> </div> CSS .feature-col:hover svg:nth-of-type(1){ fill: #FF5B0D; cursor:pointer; } JSFIDDLE 玩法： https://jsfiddle.net/93de7zbc/6/ 使用 CSS 可见性属性尝试使用 CSS 可见性属性来保持 div 的大小，以便可以悬停元素：使用 CSS 同级 .text { visibility: hidden; margin: 10px; } .sibling { cursor: pointer; } .sibling:hover + .text { visibility: visible; } <h3 class="sibling"> Hover me to show the sibling content </h3> <div class="text">Text Block 1</div>

jquery css jquery-selectors parent

回答 11 投票 0

更改“<div data-node-key". No way to get it working

JS 新手。我正在尝试改变这个类：对此： JS 新手。我正在尝试更改此类别： <div data-node-key="holders" class="ant-tabs-tab"> 对此： <div data-node-key="holders" class="ant-tabs-tab ant-tabs-tab-active"> 但是似乎没有任何效果，因为所有教程都是用于查询选择 id 或类。我认为我编写的这段代码应该可以解决问题，但我收到一条错误消息： Uncaught TypeError: Cannot read properties of null (reading 'classList') at window.onload 这是我的代码： window.onload = function() { const myElement = document.querySelector('[data-node-key="holders"]') console.log(myElement) myElement.classList.remove('ant-tabs-tab'); myElement.classList.add('ant-tabs-tab ant-tabs-tab-active'); console.log(myElement) } 我通过“自定义 JS”Chrome 扩展注入此代码来修改网站，如果这是问题所在？我无法链接您的网页，因为您需要登录才能查看任何内容，因此我附上了屏幕截图（如果有帮助的话）。 HTML 屏幕截图就像我说的，我是 JS 新手，但我想代码会在页面完全加载之前执行？好吧，我已经尝试了所有能找到的方法，但仍然无法让它工作。尝试使用 document.querySelector 选择元素并使用 classList.add 添加新类。这可能有帮助； const myElement = document.querySelector('[data-node-key="holders"]') myElement.className = 'ant-tabs-tab ant-tabs-tab-active';

javascript html jquery-selectors

回答 1 投票 0

没有特定类名的内容的 jQuery 选择器

这是我的 html 标记：这是我的 html 标记： <ul class="list-unstyled mb-2"> <li class="mr-2 d-inline-block"> <p class="m-0"><i class="fas fa-birthday-cake mr-2" aria-hidden="true"></i>Age 26-34</p> </li> <li class="mr-2"> <p class="text-truncate m-0"><i class="fas fa-map-marker-alt mr-2"></i>City</p> </li> <li class="mr-2"> <p class="text-truncate m-0"><i class="fas fa-calendar-alt mr-2"></i>29.10.2024 - 29.10.2024</p> </li> <li class="mr-2"> <p class="m-0"><i class="fas fa-money-bill-alt mr-2"></i>50 USD</p> </li> </ul> 问题是我不知道如何获取内容“29.10.2024 - 29.10.2024”，该内容之前有 <p> 和孩子 <i> 以及类名 "fa-map-marker-alt"。怎样做才能得到它？你可以这样做： $('ul.list-unstyled > li:nth-child(3) > p') .contents() .filter(function() { return this.nodeType === Node.TEXT_NODE; }) .text() .trim(); 它仅获取文本，因此它将忽略任何其他元素，请阅读有关contents此处的更多信息。

html css-selectors jquery-selectors

回答 1 投票 0

使用 jQuery 访问 css“:after”选择器[重复]

我有以下CSS： .pageMenu .active::after { 内容： ''; 顶部边距：-6px；显示：内联块；宽度：0 像素；高度：0 像素；顶部边框：14px 纯白色；边界...

jquery css jquery-selectors

回答 3 投票 0

jQuery 通过 id 和 class 匹配元素

我需要捕获表单中的一些元素。这些元素看起来像这样：我需要捕获表单中的一些元素。元素看起来像这样： <div id="wpforms-22603-field_17-container" class="wpforms-field wpforms-field-likert_scale" data-field-id="17"> <div id="wpforms-22603-field_18-container" class="wpforms-field wpforms-field-likert_scale" data-field-id="18"> <div id="wpforms-22603-field_19-container" class="wpforms-field wpforms-field-likert_scale" data-field-id="19"> 可变部分是 -field_ 之后的数字，当然还有 data-field-id 值本身。所以我写了这个： var elem = $(this).closest('[id^=wpforms-'+this_form_id+'-field_][id$=-container]'); 其中 this_form_id 包含值 22603。这很好用，但我还需要在匹配过程中指定一个类，该类是wpforms-field-likert_scale。所以我尝试了这个： var elem = $(this).closest('[id^=wpforms-'+this_form_id+'-field_][id$=-container] .wpforms-field-likert_scale'); 这不起作用。我做错了什么？删除.之前的空格 var elem = $(this).closest(`[id^=wpforms-${this_form_id}-field_][id$=-container].wpforms-field-likert_scale`); 或者使用过滤器 var elem = $(this).closest('.wpforms-field-likert_scale') .filter(`[id^=wpforms-${this_form_id}-field_][id$=-container]`);

jquery jquery-selectors

回答 1 投票 0

设置选择框的选定选项

我想设置一个先前选择的选项以在页面加载时显示。我用下面的代码尝试过： $("#gate").val('网关2'); 和我想设置一个先前选择的选项以在页面加载时显示。我用以下代码尝试过： $("#gate").val('Gateway 2'); 与 <select id="gate"> <option value='null'>- choose -</option> <option value='gateway_1'>Gateway 1</option> <option value='gateway_2'>Gateway 2</option> </select> 但这不起作用。有什么想法吗？这绝对应该有效。这是一个演示。确保您已将代码放入 $(document).ready: $(function() { $("#gate").val('gateway_2'); }); $(document).ready(function() { $("#gate option[value='Gateway 2']").prop('selected', true); // you need to specify id of combo to set right combo, if more than one combo }); $('#gate').val('Gateway 2').prop('selected', true); $("#form-field").val("5").trigger("change"); 我发现使用 jQuery .val() 方法有一个明显的缺点。 <select id="gate"></select> $("#gate").val("Gateway 2"); 如果此选择框（或任何其他输入对象）位于表单中，并且表单中使用了重置按钮，则单击重置按钮时，设置值将被清除，并且不会像您期望的那样重置为起始值. 这似乎最适合我。对于选择框 <select id="gate"></select> $("#gate option[value='Gateway 2']").attr("selected", true); 用于文本输入 <input type="text" id="gate" /> $("#gate").attr("value", "your desired value") 对于文本区域输入 <textarea id="gate"></textarea> $("#gate").html("your desired value") 对于复选框 <input type="checkbox" id="gate" /> $("#gate option[value='Gateway 2']").attr("checked", true); 对于单选按钮 <input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/> $("#gate[value='this']").attr("checked", true); 这将是另一种选择： $('.id_100 option[value=val2]').prop('selected', true); 效果很好。看看这个小提琴：http://jsfiddle.net/kveAL/ 您可能需要在 $(document).ready() 处理程序中声明您的 jQuery？另外，您可能有两个具有相同 ID 的元素吗？我也有同样的问题。解决方案：添加刷新。 $("#gate").val('Gateway 2'); $("#gate").selectmenu('refresh'); 某些情况可能是 $('#gate option[value='+data.Gateway2+']').attr('selected', true); 我知道答案有多次迭代，但现在不需要 jquery 或任何其他外部库，只需使用以下内容即可轻松完成。 document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true); <select id="gate"> <option value='null'>- choose -</option> <option value='Gateway 1'>Gateway 1</option> <option value='Gateway 2'>Gateway 2</option> </select> 我知道这有一个公认的答案，但在阅读答案的回复时，我看到了一些我可以澄清的事情，这些事情可能会帮助其他遇到值更改后事件未触发问题的人。这将选择下拉列表中的值： $("#gate").val("gateway_2") 如果此选择元素使用 JQueryUI 或其他 JQuery 包装器，请使用包装器的刷新方法来更新 UI 以显示该值已被选择。下面的示例适用于 JQueryUI，但您必须查看所使用的包装器的文档以确定刷新的正确方法： $("#gate").selectmenu("refresh"); 如果存在需要触发的事件（例如更改事件），您将必须手动触发该事件，因为更改值不会触发该事件。您需要触发的事件取决于事件的创建方式：如果事件是使用 JQuery 创建的，即 $("#gate").on("change",function(){})，则使用以下方法触发事件： $("#gate").change(); 如果事件是使用标准 JavaScript 事件创建的，即使用以下方法触发事件： var JSElem = $("#gate")[0]; if ("createEvent" in document) { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); JSElem.dispatchEvent(evt); } else { JSElem.fireEvent("onchange"); } 我的问题 get_courses(); //// To load the course list $("#course").val(course); //// Setting default value of the list 我也有同样的问题。与您的代码的唯一区别是我通过 ajax 调用加载选择框，并且执行 ajax 调用后我就设置了选择框的默认值解决方案 get_courses(); setTimeout(function() { $("#course").val(course); }, 10); $(document).ready(function() { $('#selectBoxId option[value="val2"]').prop('selected', true); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="selectBoxId"> <option value="val1">Option1</option> <option value="val2">Option2</option> <option value="val3">Option3</option> </select> 我有一个类似的问题，但我没有看到提及。我有一个 ajax 调用，必须在 ajax 调用中设置它。将其设置在ajax调用下方不起作用。 var phantomName = $("#PhantomName").val(); $.ajax({ type: "GET", url: commonUrl + "/PhantomRequest/GetPhantomList", method: "GET", data: { formType: formType }, success: function (result) { if (result.isSuccess) { $("#PhantomName").empty(); $("#PhantomName").append($("<option></option>").val("-- Select Type --").text("-- Select Type --")); $.each(result.data, function () { $("#PhantomName").append($("<option></option>").val(this.name).text(this.name)); }); if (phantomName != null && phantomName != "") { console.log("phantom name is " + phantomName); $("#PhantomName").val(phantomName); } HideLoader(); } }, error: function () { console.log("GetPhantomList failed"); HideLoader(); } }); 我遇到了一个问题，由于调用之前存在语法错误，因此未设置该值。 $("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val $("#gate").val('Gateway 2'); //this line didn't work. 调用前检查语法错误。 $(function() { $("#demo").val('hello'); }); // Make option have a "selected" attribute using jQuery var yourValue = "Gateway 2"; $("#gate").find('option').each(function( i, opt ) { if( opt.value === yourValue ) $(opt).attr('selected', 'selected'); }); 除了@icksde 和@Korah（谢谢！）使用 AJAX 构建 options 时，可能会在构建列表之前触发 document.ready，因此这可能会提供一些见解。超时确实有效，但正如 @icksde 所说，它很脆弱。最好将其放入 AJAX 函数中，如下所示： $("#someObject").change(function() { $.get("website/page.php", {parameters}, function(data) { $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>"); $("#gate").val('Gateway 2'); }, "json"); });

jquery html jquery-selectors html-select

回答 0 投票 0

jQuery 查找和替换字符串

我在网站上的某个地方有一个特定的文本，比如说“lollypops”，我想用“marshmellows”替换所有出现的该字符串。问题是我不知道到底在哪里......

javascript jquery jquery-selectors

回答 7 投票 0

如何检查元素是否没有特定的类？

如何查看是否有课程。例如，我知道如何检查它是否具有“test”类，但是如何检查它是否不具有“test”类？ if($(this).hasClass("测试"...

jquery jquery-selectors

回答 9 投票 0

jQuery 分页器插件

我正在寻找一个基于计算编号的 jQuery 分页器插件。特定类中的 div，比如Spry分页视图数据集： http://labs.adobe.com/technologies/spry/articles/pager/index.html