Have ideas to improve npm?Join in the discussion! »

    jquery-element-diff

    0.2.1 • Public • Published

    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

    • Atsushi Nagase (http://ngs.io/)

    License

    MIT License

    Install

    npm i jquery-element-diff

    DownloadsWeekly Downloads

    0

    Version

    0.2.1

    License

    none

    Last publish

    Collaborators

    • avatar