How to minify my repeating text equals and replacewith code

minify js
how to minify js files in visual studio 2017
uglifyjs
how to minify css
how to minify javascript wordpress
zepto js
minify js npm
min js

How do I minify my jQuery code as it's very repetitive and I'm sure doesn't need to be so long.

The code does exactly what I need it to do, I just need to minify to keep it looking clean and use less lines of code.

Any guidance is greatly appreciated and helps with my learning.

I came up with this code to answer my previous question. So I am learning thanks to the people on this site. I just need a little nudge in the right direction now and then. :-)

$('#hidden-shoe-sizes').contents().prependTo('.swatches-select');


var sizefour = $('[data-value="4"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizefour) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="4"]'));
  };
});
var sizefive = $('[data-value="5"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizefive) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="5"]'));
  };
});
var sizefivehalf = $('[data-value="5 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizefivehalf) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="5 ½"]'));
  };
});
var sizesix = $('[data-value="6"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizesix) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="6"]'));
  };
});
var sizesixhalf = $('[data-value="6 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizesixhalf) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="6 ½"]'));
  };
});
var sizeseven = $('[data-value="7"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizeseven) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="7"]'));
  };
});
var sizesevenhalf = $('[data-value="7 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizesevenhalf) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="7 ½"]'));
  };
});
var sizeeight = $('[data-value="8"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizeeight) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="8"]'));
  };
});
var sizeeighthalf = $('[data-value="8 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizeeighthalf) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="8 ½"]'));
  };
});
var sizenine = $('[data-value="9"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizenine) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="9"]'));
  };
});
var sizeten = $('[data-value="10"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizeten) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="10"]'));
  };
});
var sizeeleven = $('[data-value="11"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizeeleven) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="11"]'));
  };
});
var sizetwelve = $('[data-value="12"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function() {
  if ($(this).text() == sizetwelve) {
    $(this).closest('.swatch-disabled').replaceWith($('[data-value="12"]'));
  };
});
.basel-tooltip-label {
  display: none;
}

.swatch-size-large {
  padding: 10px 10px;
  border: 1px solid #ccc;
  float: left;
  margin-right: 4px;
}

.swatch-size-large.swatch-enabled {
  border-color: green;
  background: green;
  color: white;
}

.blue {
  background: blue !important;
}

.orange {
  background: orange !important;
}


/* Hidden Sizes  */

#hidden-shoe-sizes {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total">

  <div class="swatches-select" data-id="pa_size">
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-enabled" data-value="6 ½" style="">
      <span class="basel-tooltip-label">6 ½</span>6 ½
    </div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-enabled" data-value="11" style="">
      <span class="basel-tooltip-label">11</span>11
    </div>
  </div>

  <div id="hidden-shoe-sizes">
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">4</span>4</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5</span>5</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5 ½</span>5 ½</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6</span>6</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6 ½</span>6 ½</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7</span>7</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7 ½</span>7 ½</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8</span>8</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8 ½</span>8 ½</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">9</span>9</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">10</span>10</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">11</span>11</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">12</span>12</div>
  </div>
</div>

You can just use .each() to loop through all [data-value] and .filter() to get the one equal the text

$('#hidden-shoe-sizes').contents().prependTo('.swatches-select');

$('[data-value]').each(function(){            // loop through all element has a [data-value] attribute
  var ThisEl = $(this);                       // this element
  var ThisSize = ThisEl.find('span').text();  // get span text
  $('.swatch-disabled .basel-tooltip-label').filter(function(){   // filter if this text == ThisSize
     return $(this).text() == ThisSize;
  }).closest('.swatch-disabled').replaceWith(ThisEl);  // replace with this element
});
.basel-tooltip-label { display: none; }
.swatch-size-large { 
  padding: 10px 10px; 
  border: 1px solid #ccc;
  float: left;
  margin-right:4px;
}
.swatch-size-large.swatch-enabled { 
  border-color: green; 
  background: green;
  color: white;
}
.blue { background: blue !important; }
.orange { background: orange !important; }

/* Hidden Sizes  */
#hidden-shoe-sizes { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total">

<div class="swatches-select" data-id="pa_size">
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-enabled" data-value="6 ½" style="">
    <span class="basel-tooltip-label">6 ½</span>6 ½
  </div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-enabled" data-value="11" style="">
    <span class="basel-tooltip-label">11</span>11
  </div>
</div>

<div id="hidden-shoe-sizes">
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">4</span>4</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5</span>5</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5 ½</span>5 ½</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6</span>6</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6 ½</span>6 ½</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7</span>7</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7 ½</span>7 ½</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8</span>8</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8 ½</span>8 ½</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">9</span>9</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">10</span>10</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">11</span>11</div>
  <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">12</span>12</div>
</div>
</div>

Zepto Docs, And why bother to compress your code if your clients need to download the var a=10.3899845 var b=Math.floor(a); //same as var b=a|0;//numbers up to 10  Repeat text entered in Microsoft Word. Create a text form field that lets you enter text once and have it appear automatically elsewhere in the document, such as the date shown in the file's header.

Note that "minify" generally refers to the automatic process of compacting code before it's sent over the wire, such as replacing "var someLongVariableNameHere" with var c. Pretty sure what you're looking for is how to make your code more "DRY" ("Don't Repeat Yourself").

You might use an array of dataValues instead, map them to an array of their associated divs and the containing text, then iterate over the $('.swatch-disabled .basel-tooltip-label')s once, check the index of the text of that element in the array above, and then call replaceWith if the index isn't -1.

The elements and texts are extracted into arrays ahead of time so as to minimize computation complexity, which isn't necessary, but it's a good thing to strive for, even if it comes at the expense of a few more characters of code. (could make it even better by using a Map rather than using indexOf if you wanted)

$('#hidden-shoe-sizes').contents().prependTo('.swatches-select');
// while the following array declaration *could* be made a bit more DRY
// I think the code is clearest if all the options are listed out like this
const dataValues = [
  '4',
  '5',
  '5 ½',
  '6',
  '6 ½',
  '7',
  '7 ½',
  '8',
  '8 ½',
  '9',
  '10',
  '11',
  '12'
];
const elms = dataValues.map(value => $(`[data-value="${value}"]`));
const texts = elms.map(elm => elm.find('span').text());
$('.swatch-disabled .basel-tooltip-label').each(function() {
  const $this = $(this);
  const i = texts.indexOf($this.text());
  if (i !== -1) {
    $this.closest('.swatch-disabled').replaceWith(elms[i]);
  }
});
.basel-tooltip-label {
  display: none;
}

.swatch-size-large {
  padding: 10px 10px;
  border: 1px solid #ccc;
  float: left;
  margin-right: 4px;
}

.swatch-size-large.swatch-enabled {
  border-color: green;
  background: green;
  color: white;
}

.blue {
  background: blue !important;
}

.orange {
  background: orange !important;
}


/* Hidden Sizes  */

#hidden-shoe-sizes {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total">

  <div class="swatches-select" data-id="pa_size">
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-enabled" data-value="6 ½" style="">
      <span class="basel-tooltip-label">6 ½</span>6 ½
    </div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-enabled" data-value="11" style="">
      <span class="basel-tooltip-label">11</span>11
    </div>
  </div>

  <div id="hidden-shoe-sizes">
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">4</span>4</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5</span>5</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5 ½</span>5 ½</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6</span>6</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6 ½</span>6 ½</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7</span>7</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7 ½</span>7 ½</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8</span>8</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8 ½</span>8 ½</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">9</span>9</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">10</span>10</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">11</span>11</div>
    <div class="basel-swatch basel-tooltip  text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">12</span>12</div>
  </div>
</div>

Faster YouTube Embeds with JavaScript, It allows you to select modules, run tests, use UglifyJS to minify your custom build of Zepto's core module, and be sure to read the coding style guidelines. of the context; this is functionally the same as calling $(context).find(selector) . Get the children of each element in the collection, including text and comment nodes. In this month's Q&A, Susan Harkins shows a reader two simple techniques for repeating text in Word. Image: iStock/wernerimages A frequent reader question involves repeating text in a Word document.

I compacted your JavaScript code down to this!

$('#hidden-shoe-sizes').contents().prependTo('.swatches-select');

var sizes = {
    "sizefour": '[data-value="4"]',
    "sizefive": '[data-value="5"]',
    "sizefivehalf": '[data-value="5 ½"]',
    "sizesix": '[data-value="6"]',
    "sizesixhalf": '[data-value="6 ½"]',
    "sizeseven": '[data-value="7"]',
    "sizesevenhalf": '[data-value="7 ½"]',
    "sizeeight": '[data-value="8"]',
    "sizeeighthalf": '[data-value="8 ½"]',
    "sizenine": '[data-value="9"]',
    "sizeten": '[data-value="10"]',
    "sizeeleven": '[data-value="11"]',
    "sizetwelve": '[data-value="12"]'
};

$('.swatch-disabled .basel-tooltip-label').each(function() {
    if ($(this).text() in sizes) {
        $(this).closest('.swatch-disabled').replaceWith($(sizes[$(this.text())]));
    };
});

Hopefully this helps!

Tribute to Swissted, I rewrote Amit's code in plain JavaScript and with jQuery for those to add any parameter to the YouTube URL to customize your video. no-repeat center center; background-size: 64px 64px; position: The height and width of the iFrame should be the same as parent var replaceWith(iframe); }); }); });. World's simplest string and text repeater. Just paste your text in the form below, press Repeat button, and you get repeated data. Press button, get repeated text.

What is Minification | Why minify JS, HTML, CSS files, This is the second part of a series where I'm building my first Node.js web steps would be the same as if I were to scrape the HTML programmatically. Paste to your text editor. I use a minifying tool to make the code more compact. The Swissted website consists of four pages, so let's repeat the same  Repeat a text multiple times. Repeat some text multiple times, in different lines or in the same line

4. Introducing jQuery, Minification is the process of minimizing code and markup in your web pages and script files. It's one of the main methods used to reduce load times and  World's simplest browser-based utility for repeating text. Load your text in the input form on the left and you'll automatically get multiple copies of this text on the right. Powerful, free, and fast. Load text – repeat text. Created by developers from team Browserling.

Package, Often, you can replace many lines of your own JavaScript programming (and the hours jQuery is simply a bunch of JavaScript code in an external JavaScript file​. indicates that this file contains the minified version of version 1.11.0 of jQuery. an <img> tag with an ID of product101 that you wish to replace with text. Take each character from the outer loop and check the character in rest of the string using inner loop and return the first character which is repeating. Time complexity is O (N^2). Better approach: Using extra space. Iterate the string from left to right. Count the occurrence of each character and store it in a map.

Comments
  • I ended up choosing this answer as the comments per line made it very clear with helping me learn, it also makes it so if I add or take away sizes then I don't have to edit the jQuery. Great solution thanks @Mohammed-Yousef
  • I'm glad to hear its helping you @aussiedan .. Have a great day :-)
  • Thanks @CertainPerformance for your answer. It is a great solution and thanks for teaching me about DRY. I was very close as choosing this as the chosen solution.
  • Thank you @Jack Bashford nice and clean.