选择未在Javascript中应用CSS类的所有HTML元素（标签）

Question

我想从未应用特定CSS类的视图中选择所有标签。

CSS

.ondemand-field[readonly]
{
    color: #848284;
    background-color:#FFFFFF;
}

VIEW

<table>
     <tr>
          <td class="display-label">@Html.LabelFor(t => t.ProductId, new { @class = "ondemand-field" })</td>
          <td class="display-field">@Html.DisplayFor(t => t.ProductId)</td>
     </tr>
     <tr>
          <td class="display-label">@Html.LabelFor(t => t.ISBN)</td>
          <td class="display-field">@Html.DisplayFor(t => t.ISBN)</td>
     </tr>
     <tr>
          <td class="display-label">@Html.LabelFor(t => t.Title)</td>
          <td class="display-field">@Html.DisplayFor(t => t.Title)</td>
     </tr>

</table>

的JavaScript

$('#OnDemandData').change(function () {
    if ($(this).val() == 1) {
       //Select all the HTML elements where ondemand-field CSS class not applied

    }
    else {
        //TODO
    }
});

一旦选择了所有元素，我就可以添加具有“readonly”属性的ondemand-field CSS类，以便更改标签颜色。

-Alan -

Answer 1

使用.not()选择器从匹配的元素集中排除特定类：

var notOnDemand = $('.element').not('.ondemand-field');
notOnDemand.css({ 'color':'red' });

.element {
  width:100%;
  float:left;
  border:1px solid #d8d8d8;
  margin:2px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Apply red color to all exept '.ondemand-field'</h1>
<div class='element'>Element</div>
<div class='element ondemand-field'>Element (ondemand-field)</div>
<div class='element'>Element</div>
<div class='element ondemand-field'>Element (ondemand-field)</div>
<div class='element'>Element</div>

Answer 2

Yuu可以使用not()或 :not 伪类。

$('yourElements').not('.ondemand-field');

Answer 3

试试这个：您可以使用:not来获取非需求字段元素。

$('#OnDemandData').change(function () {
    if ($(this).val() == 1) {
       //Select all the HTML elements where ondemand-field CSS class not applied
       var nonOnDemand = $(document).find(':not(.ondemand-field)');
    }
    else {
        //TODO
    }
});