jquery-element-diff

jQuery plugin that generates JavaScript code to arrange element to be same.

npm install jquery-element-diff
12 downloads in the last week
19 downloads in the last month

jQuery Element Diff

jQuery plugin that generates JavaScript code to arrange element to be same.

Build Status

Getting Started

<script src="jquery.js"></script>
<script src="dist/elementDiff.min.js"></script>

Documentation

jQuery.fn.getElementDiff(element2, selector = null)

Generates JavaScript code to

jQuery.fn.elementDiff()

Returns ElementDiff instance.

Examples

<div id="sample-text1">
  Lorem ipsum
  <span class="span1">dolor</span>
  <span class="span2">sit</span>
  <span class="span3">amet</span>,
  <span class="span4">consectetur</span>
  <span class="span5">adipiscing</span>
  <span class="span6">elit</span>.
</div>
<div id="sample-text2">
  Lorem ipsum
  <span class="span1" id="dolor">dolor</span>
  <span class="span2">sit!</span>
  <b class="span3">amet</b>,
  <span class="span5">adipiscing</span>
  <span class="span6">elit</span>.
</div>
$("#sample-text1").getElementDiff($("#sample-text2"));

Returns:

[
  "$(\"#sample-text1 > :eq(0)\").attr({\"id\":\"dolor\"})",
  "$(\"#sample-text1 > :eq(1)\").html(\"sit!\")",
  "$(\"#sample-text1 > :eq(2)\").replaceWith(\"<b class=\\\"span3\\\">amet</b>\")",
  "$(\"#sample-text1 > :eq(3)\").attr({\"class\":\"span5\"}).html(\"adipiscing\")",
  "$(\"#sample-text1 > :eq(4)\").attr({\"class\":\"span6\"}).html(\"elit\")",
  "$(\"#sample-text1 > :eq(5)\").remove()",
  "$(\"#sample-text1\").attr({\"id\":\"sample-text2\"})"
]

Testing

$ npm install
$ npm test

Author

License

MIT License

npm loves you