jquery 連番のidを取得する

Question

いいねボタンを押したらいいね数が増える機能を実装しております。

いいねボタンがidが連番で並んでいるのですが、連番になっているidをjqueryで取得する場合、

どうすればいいかわからず詰んでいます。

<div class="icon_cow" style="margin:0;">
	<input class="likeButton" type="image" src="<?php echo ROOT_PATH; ?>images/PFClogo_ushi.jpg" onclick=""
		style="margin:0; 	width:24px; height:24px; margin:0; margin-left:3px; border:none;">
		<input type="hidden" name="auto_id" value="<?php echo $value['auto_id']; ?>">
		<?php foreach($driversId as $id) ?>
		<input type="hidden" name="voter_id" value="<?php echo $id; ?>">
		<input type="hidden" name="submitter_id" value="<?php echo $value['driver_id']; ?>">
	<i class="far fa-thumbs-up"></i>
		<?php
			try {
				$dbh = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME, DB_USER, DB_PASSWORD, $options);
				$dbh->query('SET NAMES utf8');

				// m_like_masterからauto_idに紐づいたlike_idの数をカウントし取得。 AS counted を引数にしています
				$sql = "SELECT COUNT(like_id) AS counted FROM m_like_master
				WHERE auto_id= " . $value['auto_id'];

				$stmt = $dbh->prepare($sql);
				$stmt->execute();
				$countResult = $stmt->fetch(PDO::FETCH_ASSOC);
				$current_like_count = $countResult['counted'];

				$dbh = null;

			} catch (PDOException $e)  {
				exit('顧客データベース接続失敗。'.$e->getMessage());
			} ?>
		<!-- いいね数の表示 -->
		<p id="like_result<?php echo $i; ?>" class="like_result"><?php echo $current_like_count; ?></p>

上記のコードで、<p id="like_result<?php echo $i; ?>" がidが連番で並んでいます。

let likeButton = $(".likeButton").each(function(i){
	$(this).attr('id','likeButton' + (i+1));
});

let likeResult = $('#like_result').each(function(i){
		$(this).attr('id', 'like_result' + (i + 1));
	});


likeButton.on('click', function(e){
	console.log(e)
	let $_parent = $( this ).closest( '.icon_cow' );
	$.ajax({
		type: 'POST',
		url: "sales_report_like_done_ajaxPost.php",
		data: {
			auto_id      : $_parent.find("input[name=auto_id]").val(),
			voter_id     : $_parent.find("input[name=voter_id]").val(),
			submitter_id : $_parent.find("input[name=submitter_id]").val(),
		}
	});
	likeResult.text( Number(likeResult.text()) + 1 );
	console.log(likeResult);
	return false;
});

どうぞよろしくお願いします。

補足情報（FW/ツールのバージョンなど）

・バージョン
PHP 7.1.23
mysql 5.6.43

Comments

[yambejp]

> いいねボタンがidが連番で並んでいる

について連番状態がどうなっているかHTMLで提示ください
また取得したものをどうしたいのか記載ください。
仮に1,2と4,5があったら連番が２つ存在しますが、そういう
ことが無いことは保証されるのでしょうか？

[kpg]

yambejp様
htmlでは、#like_result1, #like_result2, #like_result3という風になっています。
jqueryで#like_resultの数字にプラス1するという処理をしたいです。
連番が2つ存在することはないです。
よろしくお願いします。

[yambejp]

10以上になることは無いですか？
その場合でも#like_result1、#like_result10のように桁あわせを
しないのでしょうか？（桁をあわせると#like_result01になる）

> jqueryで#like_resultの数字にプラス1

それって普通クライアント側ではなく
サーバーサイドの出力時にする処理では？
（実際phpで$iを出力してますよね？）

[kpg]

10以上になることはあります。
今見たところ、10以上は#like_result10, #like_result11 となっています。

Answer 1

like_resultの数字にプラス1

<?php echo $i; ?>
↓↓↓
<?php echo ($i+1); ?>

ではダメですか？

sample

<script>
$(function(){
  $('[id^=like_result]').map(function(){
    return parseInt($(this).attr('id').replace(/^like_result/g,''));
  }).get().sort((x,y)=>-x+y).forEach(x=>$('#like_result'+x).attr('id','like_result'+(x+1).toString()));
});
</script>

<p id="like_result9">test9</p>
<p id="like_result10">test10</p>
<p id="like_result11">test11</p>

Comments

[kpg]

すいません、私の記述が足りていませんでした。
like_resultに当てている $i はもともと $i = 1　から始めています。
また、念の為いただいた方法でもしてみたのですがダメした。。。
consoleでは w.fn.init()　と表示されています。

[yambejp]

結局何をどうしたいのかわからないですね・・・
一応sampleつけときました

Answer 2

いいね数を増やすときに、いいねボタンに対応するp要素を取得したい感じですかね？
クラスlike_resultがいいね数の表示要素に付いているように見えるので、下記のコードで取れると思います。

$('.like_result').each(function(i){
    $(this).attr('id');
});