-1

How can I get the total number of data attributes with names in HTML using JavaScript or jQuery? Then, how can I get the data attributes list? Below is my HTML page.

  <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>
Benjamin W.
  • 46,058
  • 19
  • 106
  • 116
Lakshmi
  • 9
  • 5
  • If you're asking about all els containing a given data-attribute, the answers below look pretty solid. If you are looking for all data-* attributes on a given el, then maybe take a look at https://stackoverflow.com/questions/30746615/find-all-data-attributes-on-a-single-element -- the first answer is pretty comprehensive for that. – Snowmonkey Jan 26 '18 at 16:30

2 Answers2

0

So long as the data attributes you want to find are placed in the DOM when the page loads, you can use the attribute selector to retrieve the elements which have them:

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>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
0

You can access attributes with '[attribute-name]' selector 

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>
sumeet kumar
  • 2,628
  • 1
  • 16
  • 24