JQuery:如何在具有特定类的所有跨度中进行迭代

时间:2016-01-15 14:53:46

标签: jquery

请先查看我的html

<table>
  <tr>
    <td>ID</td>
    <td>Name</td>
    <td>State</td>
    <td>City</td>
  </tr>
  <tr>
    <td>
       <input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="Students_0__ID" name="Students[0].ID" type="text" value="1" />
       <span class="field-validation-valid text-danger" data-valmsg-for="Students[0].ID" data-valmsg-replace="true"></span>
   </td>
   <td>
     <input data-val="true" data-val-required="The Name field is required." id="Students_0__Name" name="Students[0].Name" type="text" value="JoyDev" />
     <span class="field-validation-valid text-danger" data-valmsg-for="Students[0].Name" data-valmsg-replace="true"></span>
   </td>
   <td>
     <select class="edit-mode" data-val="true" data-val-number="The field StateID must be a number." data-val-required="The StateID field is required." id="Students_0__StateID" name="Students[0].StateID"><option value="">-- Select States--</option>
       <option selected="selected" value="1">WestBengal</option>
       <option value="2">Bihar</option>
       <option value="3">Orrisa</option>
     </select>
     <span class="field-validation-valid text-danger" data-valmsg-for="Students[0].StateID" data-valmsg-replace="true"></span>
   </td>
   <td>
      <select class="edit-model" data-val="true" data-val-number="The field CityID must be a number." data-val-required="The CityID field is required." id="Students_0__CityID" name="Students[0].CityID"><option value="">--Select States--</option>
         <option selected="selected" value="1">Alipur</option>
         <option value="2">Asansol</option>
         <option value="3">Andul</option>
      </select>
      <span class="field-validation-valid text-danger" data-valmsg-for="Students[0].CityID" data-valmsg-replace="true"></span>
     </td>
    </tr>
    <tr>
      <td>
        <input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="Students_1__ID" name="Students[1].ID" type="text" value="1" />
        <span class="field-validation-valid text-danger" data-valmsg-for="Students[1].ID" data-valmsg-replace="true"></span>
      </td>
      <td>
         <input data-val="true" data-val-required="The Name field is required." id="Students_1__Name" name="Students[1].Name" type="text" value="Mukti" />
         <span class="field-validation-valid text-danger" data-valmsg-for="Students[1].Name" data-valmsg-replace="true"></span>
       </td>
       <td>
          <select class="edit-mode" data-val="true" data-val-number="The field StateID must be a number." data-val-required="The StateID field is required." id="Students_1__StateID" name="Students[1].StateID"><option value="">-- Select States--</option>
          <option value="1">WestBengal</option>
          <option selected="selected" value="2">Bihar</option>
          <option value="3">Orrisa</option>
        </select>
        <span class="field-validation-valid text-danger" data-valmsg-for="Students[1].StateID" data-valmsg-replace="true"></span>
      </td>
       <td>
          <select class="edit-model" data-val="true" data-val-number="The field CityID must be a number." data-val-required="The CityID field is required." id="Students_1__CityID" name="Students[1].CityID"><option value="">--Select States--</option>
            <option selected="selected" value="1">Janpur</option>
            <option value="2">Madhubani</option>
            <option value="3">Kanti</option>
          </select>
          <span class="field-validation-valid text-danger" data-valmsg-for="Students[1].CityID" data-valmsg-replace="true"></span>
        </td>
      </tr>
      <tr>
        <td>
           <input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="Students_2__ID" name="Students[2].ID" type="text" value="1" />
              <span class="field-validation-valid text-danger" data-valmsg-for="Students[2].ID" data-valmsg-replace="true"></span>
        </td>

        <td>
           <input data-val="true" data-val-required="The Name field is required." id="Students_2__Name" name="Students[2].Name" type="text" value="Somnath" />
           <span class="field-validation-valid text-danger" data-valmsg-for="Students[2].Name" data-valmsg-replace="true"></span>
        </td>
        <td>
           <select class="edit-mode" data-val="true" data-val-number="The field StateID must be a number." data-val-required="The StateID field is required." id="Students_2__StateID" name="Students[2].StateID"><option value="">-- Select States--</option>
             <option value="1">WestBengal</option>
             <option value="2">Bihar</option>
             <option selected="selected" value="3">Orrisa</option>
           </select>
           <span class="field-validation-valid text-danger" data-valmsg-for="Students[2].StateID" data-valmsg-replace="true"></span>
         </td>
         <td>
           <select class="edit-model" data-val="true" data-val-number="The field CityID must be a number." data-val-required="The CityID field is required." id="Students_2__CityID" name="Students[2].CityID"><option value="">--Select States--</option>
             <option value="1">Chandapur</option>
             <option selected="selected" value="2">Dhankauda</option>
             <option value="3">Konarak</option>
           </select>
           <span class="field-validation-valid text-danger" data-valmsg-for="Students[2].CityID" data-valmsg-replace="true"></span>
          </td>
         </tr>
      </table>

我希望迭代表格中field-validation-error的所有范围 我试过这种方式,但没有运气。

$("table td span[class='field-validation-error']").each(function () {
    alert($(this).attr("data-valmsg-for"));
    $(this).addClass(".hidden");//Add class hidden to hide  @@Html.ValidationMessageFor(model => model.xyz) if using bootstrap , else use css
    var inputID = $(this).attr("data-valmsg-for");//get the id of the input field for which this validation prompted
    var validationMessage = $(this).html();//Get validation message for input filed which is prompted
    //$("#" + inputID).tooltip({ 'trigger': 'hover', 'title': validationMessage });//Trigger the tooltip now, if using bootstrap.

    //******OR*******

    $("#" + inputID).attr("title", validationMessage);
});

我尝试使用特定类迭代所有范围,并尝试添加名为hidden的类,并尝试从中读取属性值data-valmsg-for。 还尝试将一些文本添加到html控件的标题属性$("#" + inputID).attr("title", validationMessage);但不使用我的代码。

当我测试代码时,发现控件不会进入此迭代$("table td span[class='field-validation-error']").each()我肯定在jquery代码中犯了一些错误。所以寻找指导。感谢

6 个答案:

答案 0 :(得分:3)

您可以使用作为类选择器.的点$("table td span.field-validation-error"),并使用 data() 来获取数据属性:

$(this).data("valmsg-for");

而不是:

$(this).attr("data-valmsg-for");

希望这有帮助。

答案 1 :(得分:2)

在处理课程选择时,您必须使用.表示法。因此,您可以按如下方式选择span元素:

$('table td span.field-validation-error').each(function () {
  // your code here
});

答案 2 :(得分:0)

.(点)指定您要匹配span标记的class属性。

$('table td span.field-validation-error').each(function)

JQuery借用它selectors from the W3 CSS specification。您可以看到完整的JQuery选择器文档here

答案 3 :(得分:0)

尝试:

 $("table td .field-validation-error")

这个选择器。

答案 4 :(得分:0)

$('span.field-validation-error').each(function () {
   var spn = $(this);
   spn.css({
       //your code.
   })
});

答案 5 :(得分:0)

$('table td span.field-validation-error').each(function () {
    // your code
});

使用.按班级选择