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

Question

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

我

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

好的，整个画面是我事先不知道文本框名称（获取列表 ASP.NET MVC 会自动命名我的输入字段），所以我唯一知道的是我想清空第一个文本框，其名称属性值以"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('');
});

Answer 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('');
});

小提琴

Answer 2

试试这个

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

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