Question

我有一个表，每个tr元素都有一个自定义数据属性，我想将样式应用于某些值。

在HTML中：

<table id="notify" class="t_notify">
<tr data-notify="101">
 <td>data</td>
 <td>data</td>
</tr>
<tr data-notify="102">
 <td>data</td>
 <td>data</td>
</tr>
<!-- and goes -->
</table>

使用CSS：

.t_notify>tbody>tr{background:#BBB;}
.t_notify>tbody>tr:hover{background:transparent;}

当我点击某个tr元素时，我尝试在Jquery中进行此操作，例如：

$("#notify > tbody > tr").attr("[data-notify='101']").css({"background":"#CCC"});

但这不起作用。我想要一些帮助。

Answer 1

好方法

您的查询必须位于选择器中，如下所示：

＆＃13;

$("#notify > tbody > tr[data-notify='101']").css({"background":"#CCC"});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="notify" class="t_notify">
<tr data-notify="101">
 <td>data</td>
 <td>data</td>
</tr>
<tr data-notify="102">
 <td>data</td>
 <td>data</td>
</tr>
<!-- and goes -->
</table>

＆＃13;

ATTR（）

attr()函数返回属性的值或设置它。在你的情况下，你既不想要。希望它有所帮助。

Answer 2

您的问题是attr()旨在用于获取/设置属性。它不会过滤集合中的元素。相反，您应该在主jQuery对象中使用属性选择器。

另外，请注意，在下面的示例中，我更改了突出显示颜色，#BBB非常难以发现#CCC。我还修改了代码以使用addClass()，因为你应该尽可能避免使用css()，因为它将JS代码与UI过于紧密地联系在一起。最后，我修改了CSS规则，以便运算符优先级适用于所有场景。

＆＃13;

$("#notify > tbody > tr[data-notify='101']").addClass('foo');

＆＃13;

.t_notify tr {
  background: #BBB;
}

.t_notify > tbody > tr:hover {
  background: transparent;
}
 
.t_notify tr.foo { 
   background-color: #C00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="notify" class="t_notify">
  <tr data-notify="101">
    <td>data</td>
    <td>data</td>
  </tr>
  <tr data-notify="102">
    <td>data</td>
    <td>data</td>
  </tr>
  <!-- and goes on... -->
</table>

＆＃13;

Answer 3

将数据放入选择器：Demon on JsFiddle

$("#notify > tbody > tr[data-notify='101']").css({"background":"#CCC"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="notify" class="t_notify">
<tr data-notify="101">
 <td>data</td>
 <td>data</td>
</tr>
<tr data-notify="102">
 <td>data</td>
 <td>data</td>
</tr>
<!-- and goes -->
</table>

CSS属性选择器根据给定属性的存在或值匹配元素。

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

source

Answer 4

1111

应该是：

$("#notify > tbody > tr").attr("[data-notify='101']")

在cQuery中使用自定义数据属性将css应用于tr

4 个答案:

好方法

ATTR（）