使用jquery $（object）

Question

我有一个包含两列的自定义属性“data-cid”的简单表。我想根据data-cid proerpty隐藏列。

$(document).ready(function() {
  $("th[data-cid='Col_17']").each(function(index, obj) {
    if ($(obj).prop("className") == "")
      $(obj).attr("class", "hide-elem");
    else
      $(obj).addClass("hide-elem");
  });

}
$("td[data-colId='Col_17']").each(function(index, obj) {
  if ($(obj).prop("class") == "")
    $(obj).attr("class", "hide-elem");
  else
    $(obj).addClass("hide-elem");
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th data-cid="Col_18">sadf</th>
      <th data-cid="Col_17">asdf</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-cid="Col_18">sadf</td>
      <td data-cid="Col_17">sadf</td>
    </tr>
  </tbody>
</table>

在上面的浏览器中无法将类添加到我的th和td。有人可以帮我解决什么问题吗？

Answer 1

<强>问题： -

  

您的代码中还有一个}

试试这个： -

$(document).ready(function() {
    $("th[data-cid='Col_17'], td[data-cid='Col_17']").each(function(index, obj) {
            if($(obj).prop("className") == ""){
                $(obj).attr("class", "hide-elem");
            }else{
                $(obj).addClass("hide-elem");
            }
        });

        
       
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
<thead>
<tr><th data-cid="Col_18">sadf</th>
<th data-cid="Col_17">asdf</th></tr> 
</thead>
<tbody>
<tr><td data-cid="Col_18">sadf</td>
<td data-cid="Col_17">sadf</td></tr>
</tbody>
</table>

Answer 2

两个循环之间有一个额外的next。但是你可以通过将两个选择器放在一起简单地将它们组合成一个循环。您在}选择器中也有拼写错误，您有td而不是data-colId。

data-cid

$(document).ready(function() {
  $("th[data-cid='Col_17'], td[data-cid='Col_17']").each(function(index, obj) {
    if ($(obj).prop("className") == "")
      $(obj).attr("class", "hide-elem");
    else
      $(obj).addClass("hide-elem");
  });
});

.hide-elem {
  display: none;
}

Answer 3

你有一个额外的}，你的jquery选择器是错误的。它应该是$("th[data-cid='Col_17']")而不是$("th[data-cid='Col_17']")

＆＃13;

＆＃13;

$(document).ready(function() {

$("th[data-cid='Col_17']").each(function(index, obj) {
    if ($(obj).prop("className") == "")
      $(obj).attr("class", "hide-elem");
    else
      $(obj).addClass("hide-elem");
  });
  
  
$("td[data-cid=Col_17]").each(function(index, obj) {

  if ($(obj).prop("class") == "")
    $(obj).attr("class", "hide-elem");
  else
    $(obj).addClass("hide-elem");
});
});

＆＃13;

.hide-elem{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
  <thead>
    <tr>
      <th data-cid="Col_18">sadf</th>
      <th data-cid="Col_17">asdf</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-cid="Col_18">sadf</td>
      <td data-cid="Col_17">sadf</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;