javascript - Jquery选择带有相邻星号的输入

Question

使用 jquery，我试图选择那些inputs旁边有星号的。

HTML

<form name="checkout">
<table width="100%" border="0">
  <tr>
   <td>First Name</td>
   <td><input type="text" name="FirstName" value="" />*</td>
  </tr>
  <tr>
   <td>Last Name</td>
   <td><input type="text" name="LastName" value="" /></td>
  </tr>
</table>
</form>

jQuery

var elems = $("form[name='checkout'] :input").filter(function(index) {
               var str = $(this).parents('td').html()
               return (str.indexOf("*")!=-1)
            }).length;

的结果elems应该是 1 但它不起作用，即尽管在处理程序中返回 false，但表单仍提交，因此似乎无法捕获错误详细信息。我究竟做错了什么？

Answer 1

var elems = $("td:contains('*') input");

这是您需要的输入元素的选择器。在这种情况下，elems.length 会给你 1

Answer 2

哈哈，

缺少 onReady()。用这个，

$(function(){
var elems = $("form[name='checkout'] :input").filter(function(index) {
           var str = $(this).parents('td').html()
           return (str.indexOf("*")!=-1)
        }).length;

console.log(elems);
});

应该这样做。干杯:)。

Answer 3

我建议你使用 CSS :after 伪元素

<style>
.mandatory:after{
 content:"*";
}
</style>

<span  class="mandatroy">
  <input type="text" name="FirstName" value="">
</span>


<script>
 $("form[name='checkout'] .mandatory > :input")
</script>

Answer 4

如果您将一个类添加到后面带有星号的输入中，那会更容易：

<td><input type="text" name="FirstName" class="required" />*</td>

然后你可以按他们的班级选择他们，对他们做任何你想做的事。

$("input.required").length();

Answer 5

鉴于明确的要求：

$('input').filter(function () {
    return (this.nextSibling && this.nextSibling.nodeValue.indexOf('*') > -1) || (this.previousSibling && this.previousSibling.nodeValue.indexOf('*') > -1);
}).css('border-color','#f00');

JS 小提琴演示。