Как унифицировать скрипт изображения jQuery?

Question

мой английский язык не очень хорош. извините!

я хочу иметь один сценарий для всех изображений в теле.

мои сценарии клонируют изображения для рисунка и клонируют "изображение alt" для figcaption.

этодва сценария для двух изображений. и я хочу один сценарий для всех изображений.

Я надеюсь, что написал правильно и надеюсь, что исправил мою проблему.

Я хочу unify = 1.ins, inm, .. 2. #fig 3. # figcapt

спасибо

$("img").removeAttr("height");
$('.ins, .inm, .inl, .outs, .outm, .outl').each(function(i) {
	var $this = $(this);
	var newClass = "i" + i++;    
    $this.addClass(newClass);
});

// i want unify The following two scripts :

// SCRIPT 1:

$('.ins.i0, .inm.i0, .inl.i0, .outs.i0, .outm.i0, .outl.i0').each(function() {
	var $repi = $(this);
	var repicl = $(this).attr("class");
		$repi.after("<figure id='fig0'></figure>");
		$('#fig0').addClass(repicl);
		$repi.clone().appendTo("#fig0");
		$("#fig0").append("<figcaption id='fcapt0' class='fcapt'></figcaption>");
	var $alti =  $(this).attr('alt');
	$("#fcapt0").html($alti);
	$(this).remove();
	return false;

});

// SCRIPT 2:

$('.ins.i1, .inm.i1, .inl.i1, .outs.i1, .outm.i1, .outl.i1').each(function() {
	var $repi = $(this);
	var repicl = $(this).attr("class");
		$repi.after("<figure id='fig1'></figure>");
		$('#fig1').addClass(repicl);
		$repi.clone().appendTo("#fig1");
		$("#fig1").append("<figcaption id='fcapt1' class='fcapt'></figcaption>");
	var $alti =  $(this).attr('alt');
	$("#fcapt1").html($alti);

	$(this).remove();
	return false;

});

figure{
	margin: auto;
	padding:auto; 
	float: inherit;
	height:auto !important;
	position: relative;
	
}
figure.inm{
	width:50% !important;
	margin:0;
	padding:0; 
}
figure.inl{
	width:75% !important;
	margin:0;
	padding:0; 
}
figure.ins img, figure.inm img, figure.inl img{
	width:100% !important;
	margin:0;
	padding:0; 
}
figure.ins{
	width:33.3% !important;
	margin:0;
	padding:0; 
}
figure.size-full{
	margin:10px 10px 0px 10px !important;
	padding:0 !important;

}
figure.alignnone, figure.alignright  {
	float: right;
	margin:0;
	padding:0;
}
figure.alignleft   {
	float: left;
	margin:0;
	padding:0;
}
figure figcaption{
	position: absolute;
	background-color: #000;
	color: #fff;
	opacity: 0.5;
	width: 97%;
	bottom: 13px;
	right: 0;
	height: auto;
	padding:0 1.5% 0 1.5%;
	line-height: 180%;
	font-size: 9pt;
	margin: 0;
	text-align: right;

}

figure:hover figcaption{
	display: none
}
body img{
	max-width:100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>aaaaaaa</p>
<p><img class="inm alignright wp-image-2414 size-full" src="bbbbbb.jpg" alt="bbbbbb" width="287" height="176" /></p>
<p>cccccccccc</p>
<p>ddddddddd</p>
<p><img class="inm alignleft wp-image-2425 size-full" src="eeeeeee.jpg" alt="eeee " width="271" height="186" /></p>
<p>ffffffff</p>
<p>gggggggggg</p>
<p>hhhhhhhhhhhh</p>

Answer 1

Вы можете использовать i в качестве класса, а затем выполнять все действия динамически на основе i, как показано ниже. Также я оптимизировал ваш код и убрал немного лишнего. Также я использовал wrap вместо клонирования и удаления элементов.

$('.inm').each(function(i) {

  var $this = $(this);
  $this.addClass("i" + i);
    
  var repicl = $this.attr("class");
  var $alti = $this.attr('alt');

  $this.wrap("<figure id='fig"+i+"' class='"+repicl+"'></figure>");
  $("#fig" + i).append("<figcaption id='fcapt"+i+"' class='fcapt'>"+$alti+"</figcaption>");
  
});

figure {
  margin: auto;
  padding: auto;
  float: inherit;
  height: auto !important;
  position: relative;
}

figure.inm {
  width: 50% !important;
  margin: 0;
  padding: 0;
}

figure.inl {
  width: 75% !important;
  margin: 0;
  padding: 0;
}

figure.ins img,
figure.inm img,
figure.inl img {
  width: 100% !important;
  margin: 0;
  padding: 0;
}

figure.ins {
  width: 33.3% !important;
  margin: 0;
  padding: 0;
}

figure.size-full {
  margin: 10px 10px 0px 10px !important;
  padding: 0 !important;
}

figure.alignnone,
figure.alignright {
  float: right;
  margin: 0;
  padding: 0;
}

figure.alignleft {
  float: left;
  margin: 0;
  padding: 0;
}

figure figcaption {
  position: absolute;
  background-color: #000;
  color: #fff;
  opacity: 0.5;
  width: 97%;
  bottom: 13px;
  right: 0;
  height: auto;
  padding: 0 1.5% 0 1.5%;
  line-height: 180%;
  font-size: 9pt;
  margin: 0;
  text-align: right;
}

figure:hover figcaption {
  display: none
}

body img {
  max-width: 100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class="inm" alt="Some alt text" src="https://images.unsplash.com/photo-1446292267125-fecb4ecbf1a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />

<img class="inm" alt="Some alt text" src="https://images.unsplash.com/photo-1446292267125-fecb4ecbf1a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />