jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<div class="panel1">
  <span class="editorTitle">Old</span>
  <div class="htmlArea">
    <h2>
      <a href="http://www.bbc.co.uk/news/blogs/the_papers">The Papers</a>
    </h2>
    <div>
      <div>
        <div>
          <div>
            <img src="https://ichef.bbci.co.uk/news/235/cpsprodpb/461A/production/_103664971_index.jpg">
          </div>
        </div>

        <div>
          <h3>

            <span>Braxit, Boris Johnson, and a field of wheat</span>
          </h3>
          <p>Multiple papers today focused on Boris Johnsos speech at the Tory conference - and his morning run.</p>
          <div>

            <ul>
              <li>
                <div>5 hours ago</div>
              </li>
            </ul>
          </div>
        </div>

        <a href="/news/blogs-the-papers-45714340">Full article Brexit, Birys Johnson, and a fid of whet</a>
      </div>
    </div>
  </div>
</div>
<!--------------------- ---------------------------------------->
<div class="panel2">
  <span class="editorTitle">New</span>
  <div class="htmlArea">
    <h2>
      <a href="http://www.bbc.co.uk/news/blogs/the_papers">The Newest</a>
    </h2>
    <div>
      <div>
        <div>
          <div>
            <img src="https://ichef.bbci.co.uk/news/235/cpsprodpb/461A/production/_103664971_index.jpg">
          </div>
        </div>

        <div>
          <h3>

            <span>Brexit, Boris Johnson, and a field of wheat</span>
          </h3>
          <p>Multiple papers today focused on Boris Johnsos speech at the Tory conference - and his morning run.</p>
          <div>

            <ul>
              <li>
                <div>6 hours ago</div>
              </li>
            </ul>
          </div>
        </div>

        <a href="/news/blogs-the-papers-45714323">Full article Brexit, Borys Johnson, and a fid of whet</a>
      </div>
    </div>
  </div>
</div>

<div class="differences">
  <span class="editorTitle">Differences</span>
  <div class="htmlArea"></div>
</div>

CSS

.panel1,
.panel2,
.differences {
  width: calc(45% - 4px);
  float: left;
  overflow: hidden;
  margin-left: 2.5%;
  margin-right: 2.5%;
  border: 1px solid #a9a9a9;
  margin-bottom: 2.5%;
}

.panel1 img,
.panel2 img,
.differences img {
  width: 75%;
  height: auto;
}

.panel1 {
  background: #efecec;
}

.highlight {
  color: red;
}

.editorTitle {
  display: block;
  font-family: Segoe UI;
  background: #454545;
  color: #eee;
  padding: 4px;
  font-size: 12px;
}

.htmlArea {
  padding: 10px;
}

JavaScript

highlight($(".panel1 .htmlArea"), $(".panel2 .htmlArea"));

function highlight(newElem, oldElem) {
  var newText = newElem.html();
  var oldText = oldElem.html();

  var text = "";
  newElem.html().split("").forEach(function(value, index) {
    if (value != oldText.charAt(index))
      text += "<span class='highlight'>" + value + "</span>";
    else
      text += value;
  });
  $('.differences .htmlArea').html(text.trim());
}


$('').on('keyup', function() {

})