Jquery 选择器：属性值以开头和结尾

Posted 2023-05-09

【中文标题】Jquery 选择器：属性值以开头和结尾

【英文标题】：Jquery selectors : property value begin with and end with

【发布时间】：2013-11-15 03:00:00

【问题描述】：

我是 Jquery 的初学者，我遇到了一个不知道如何解决的小问题。我尝试使用 JSFiddle 进行调试，但没有成功，所以这里是我的问题：

我有两个 div 元素，在第一个 div 中有几个文本框，在第二个 div 中有我的按钮。我希望当我单击按钮时，第一个 div 中的特定文本框变为空。

好吧，整个情况是我事先不知道文本框名称（一个列表是 fetch 和 ASP.NET MVC 自动命名我的输入字段），所以我唯一知道的就是我想清空第一个文本框，其 name 属性值以“input1”结尾（它的开头是自动生成的）。我也知道我感兴趣的文本框是紧接在我的按钮之前的文本框。我希望我是清楚的。

这是我的小提琴，它不起作用：http://jsfiddle.net/XvTNh/1/

任何帮助将不胜感激！

html：

<div class="myClass1">
<input name="fdsgginput1" type="text" value="Salé sucré"/>
<input name="gfsginput2" type="text" value="Macarons"/>
</div>

<div class="myClass2fdsff">
<input type="submit" name="envoyer" />

JS：

$("div[class^='myClass2']").on('click','input[name="envoyer"]',function()
$(this).closest('input[name$="input1"]').val('');
);

【参考方案1】：

您基本上是在尝试在 DOM 中导航。 closest 不会去寻找可能在 HTML 中附近的其他元素。相反，它会沿着 DOM 树向上，查看祖先元素，并查看是否有任何元素与您传递的选择器匹配。

由于你要的元素不是祖先元素，所以不会被找到。您实际上需要添加一个共同的祖先元素（实际上您的 HTML 可能已经包含一个），然后结合 closest 和 find 来查找该元素：

$("div[class^='myClass2']").on('click', 'input[name="envoyer"]', function () 
    $(this).closest('.container').find('input[name$="input1"]').val('');
);

fiddle

【讨论】：

谢谢，它就像一个魅力！我不知道最接近的人无法通过 div 搜索，我知道我对 Jquery 的工作原理有更好的了解

另外，$(this).parent().prev().find('input[name$="input1"]').val(''); 之类的东西也可能有效，具体取决于确切的 HTML 结构。

@EiríkurFannarTorfason 确实会，但我个人发现依靠像parent和prev这样的单步遍历方法更有可能在未来引起问题，例如当 HTML 被修改时。

@lonesomeday 够公平的。只是从 OP 的标记中并不清楚 div 在容器中配对在一起。

【参考方案2】：

试试这个

$("body").find('input[name$="input1"]').first().val('');

【讨论】：

感谢您的帮助，这个答案的问题是我的实际代码比这更复杂。我有几个名称以 input1 结尾的元素，我什至不知道我是否对页面的第一个感兴趣。 （获取列表）Lonesomeday 解决方案是最合适的

【参考方案3】：

试试这个：

<script>
$(document).ready(function()
    $('.myClass2fdsff input[type=submit]').click(function()
         $('.myClass1 input:first').val(''); // Empty first textbox
         $('.myClass1 input[name*=input1]').val(''); //Empty input with input1 in name
    );
);
</script>

【讨论】：

感谢您的帮助 Joao。但是它不符合我的实际需要 =/ Lonesomeday 解决方案正是我想要的！