Question

如何使用JavaScript或jQuery获取HTML中包含名称的数据属性总数？那么，我怎样才能获得数据属性列表？下面是我的HTML页面。

  <body>
    <form id="form1" >
    <div id="divid">
        <button onclick="compare();">Compare</button><br />
    <table border="1">
        <tr>         
             <td><h4>Title</h4><div style="border: 1px solid black;" data-pccompare="t2">fgfgg</div></td>
        </tr>
        <tr>         
            <td><h4>Page Name</h4><div style="border: 1px solid black;" data-pccompare="p1">fgfgg</div></td>
             <td><h4>Page Name</h4><div style="border: 1px solid black;" data-pccompare="p2">fgfgg</div></td>
        </tr>
        <tr>         
            <td><h4>Description</h4><div style="border: 1px solid black;" data-pccompare="d1">fgfgg</div></td>
             <td><h4>Description</h4><div style="border: 1px solid black;" data-pccompare="d2">fgfgg</div></td>
        </tr>
        <tr>         
            <td><h4>Guide Name</h4><div style="border: 1px solid black;" data-pccompare="g1">fgfgg</div></td>
             <td><h4>Guide Name</h4><div style="border: 1px solid black;" data-pccompare="g2">fgfgg</div></td>
        </tr>
    </table>
    </div>
   </form>
</body>

Answer 1

只要您要查找的data属性在页面加载时放在DOM中，您就可以使用attribute选择器检索包含它们的元素：

var $elements = $('[data-pccompare');

console.log($elements.length);

table td div {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>
      <h4>Title</h4>
      <div data-pccompare="t2">fgfgg</div>
    </td>
  </tr>
  <tr>
    <td>
      <h4>Page Name</h4>
      <div data-pccompare="p1">fgfgg</div>
    </td>
    <td>
      <h4>Page Name</h4>
      <div data-pccompare="p2">fgfgg</div>
    </td>
  </tr>
  <tr>
    <td>
      <h4>Description</h4>
      <div data-pccompare="d1">fgfgg</div>
    </td>
    <td>
      <h4>Description</h4>
      <div data-pccompare="d2">fgfgg</div>
    </td>
  </tr>
  <tr>
    <td>
      <h4>Guide Name</h4>
      <div data-pccompare="g1">fgfgg</div>
    </td>
    <td>
      <h4>Guide Name</h4>
      <div data-pccompare="g2">fgfgg</div>
    </td>
  </tr>
</table>

Answer 2

您可以使用'[attribute-name]'选择器访问属性

console.log($('[data-pccompare]'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" >
    <div id="divid">
        <button onclick="compare();">Compare</button><br />
    <table border="1">
        <tr>         
             <td><h4>Title</h4><div style="border: 1px solid black;" data-pccompare="t2">fgfgg</div></td>
        </tr>
        <tr>         
            <td><h4>Page Name</h4><div style="border: 1px solid black;" data-pccompare="p1">fgfgg</div></td>
             <td><h4>Page Name</h4><div style="border: 1px solid black;" data-pccompare="p2">fgfgg</div></td>
        </tr>
        <tr>         
            <td><h4>Description</h4><div style="border: 1px solid black;" data-pccompare="d1">fgfgg</div></td>
             <td><h4>Description</h4><div style="border: 1px solid black;" data-pccompare="d2">fgfgg</div></td>
        </tr>
        <tr>         
            <td><h4>Guide Name</h4><div style="border: 1px solid black;" data-pccompare="g1">fgfgg</div></td>
             <td><h4>Guide Name</h4><div style="border: 1px solid black;" data-pccompare="g2">fgfgg</div></td>
        </tr>
    </table>
    </div>
   </form>

如何使用JavaScript获取HTML中的数据属性列表

2 个答案: