Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > การ loop each div เพื่อหา ค่าของ elements โดยค่า elements นั้นก็เป็น arrays เช่นกัน (มีตัวอย่าง)

การ loop each div เพื่อหา ค่าของ elements โดยค่า elements นั้นก็เป็น arrays เช่นกัน (มีตัวอย่าง)

เริ่มหัวข้อใหม่

minny

โพสกระทู้ ( 15 )
บทความ ( 0 )

เราพยามยามที่จะวนลูป div parent แล้วเอาข้อมูล sub ข้างในมาใช้
ด้วยการ each 2 อันซ้อนกันแบบในโค้ด
ปัญหาคือ each อันข้างในมันวนลูปอ่าน 9 รอบเลย
1. each แรกลูป 3 รอบ ตาม parent อันนี้ถูกแล้ว >>> $(".parent").each(function(e){
2. each ข้างในที่เป็นปัญหา คือ $("input[name^='sub']").each(function ()
ตัวนี้มันลูปอ่าน 9 รอบเลย !! ในลูป parent แรก
(value 1 2 3 4 5 6 7 8 9)
เราต้องการให้มัน อ่านแค่ 3 รอบ ของตัว parent มัน
(value 1 2 3 ) และ (value 4 5 6 ) และ (value 7 8 9 )

โค้ดออนไลน์ https://jsfiddle.net/chanthida/q0fezox8/4/

Code

<div class="parent">
<input name="sub[0]" data-date="2020-08-04" value="1">
<input name="sub[1]" data-date="2020-08-05" value="2">
<input name="sub[1]" data-date="2020-08-06"value="3">
</div>

<div class="parent">
<input name="sub[0]" data-date="2020-08-04" value="4">
<input name="sub[1]" data-date="2020-08-05" value="5">
<input name="sub[1]" data-date="2020-08-06"value="6">
</div>

<div class="parent">
<input name="sub[0]" data-date="2020-08-04" value="7">
<input name="sub[1]" data-date="2020-08-05" value="8">
<input name="sub[1]" data-date="2020-08-06"value="9">
</div>

<script>
var Items_parent = [];

$(".parent").each(function(e){
var Items_sub = {};
$("input[name^='sub']").each(function () {

var val = $(this).val();
var dateData = $(this).attr('data-date');

Items_sub[dateData] = val;
});

Items_parent[$(this).attr('data-type')] = Items_sub;

});

console.log(Items_parent);
</script>

Tag : PHP, JavaScript, jQuery

ประวัติการแก้ไข
2020-08-04 17:53:52

Date : 2020-08-04 17:16:11

By : bankcute

View : 622

Reply : 4

No. 1

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

อธิบายใหม่ได้มั้ยครับ อ่าน 3 รอบยังไม่เข้าใจ

Date : 2020-08-04 17:32:58

By : Genesis™

No. 2

Chaidhanan

โพสกระทู้ ( 9,587 )
บทความ ( 2 )

Code (JavaScript)

var Items_sub = [];
$(".parent").each( (i,e)=>{
  $(e).find("input").each( (j, inp)=>{
      Items_sub[i][inp.name] = inp.value;
  });
});

ประวัติการแก้ไข
2020-08-04 17:34:13
2020-08-04 17:35:51

Date : 2020-08-04 17:33:44

By : Chaidhanan

No. 3

minny

โพสกระทู้ ( 15 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : Genesis™ เมื่อวันที่ 2020-08-04 17:32:58

รายละเอียดของการตอบ ::

แก้ใหม่แล้ว พอดีรีบไปหน่อย

Date : 2020-08-04 17:54:36

By : bankcute

No. 4

พระยาเทพ

โพสกระทู้ ( 1,458 )
บทความ ( 0 )

Code (JavaScript)

<!DOCTYPE html>
<html>

<body>
	<div class="parent" data-type="type1">
      <input name="sub[0]" data-date="2020-08-04" value="1">
      <input name="sub[1]" data-date="2020-08-05" value="2">
      <input name="sub[1]" data-date="2020-08-06"value="3">
    </div>
    
    <div class="parent" data-type="type2">
      <input name="sub[0]" data-date="2020-08-04" value="4">
      <input name="sub[1]" data-date="2020-08-05" value="5">
      <input name="sub[1]" data-date="2020-08-06"value="6">
    </div>
    
    <div class="parent"  data-type="type3">
      <input name="sub[0]" data-date="2020-08-04" value="7">
      <input name="sub[1]" data-date="2020-08-05" value="8">
      <input name="sub[1]" data-date="2020-08-06"value="9">
    </div>
    <!-- ระวัง name ซ้ำกัน...จะส่งผลให้ได้รับข้อมูลเพี้ยนเมื่อใช้ AJAX POST -->
    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>

	var Items_parent = []; // ประกาศเป็น array แต่หลังจากใช้ name index จะแปลงร่างเป็น object

    $(".parent").each(function(i, e){ // element ใส่เป็น parameter 2
		var Items_sub = {};
		$(e).find("input[name^='sub']").each(function () {  // เอาเฉพาะ input ของแต่ละ type
			var val = $(this).val();
			var dateData = $(this).attr('data-date');
                   
			Items_sub[dateData] = val;                   
		});           
		Items_parent[$(this).attr('data-type')] = Items_sub;  // อาร์เรย์ Items_parent เปลี่ยนเป็น object
	});

	console.log(Items_parent);

// PhrayaDev@2020
</script>
</body>

</html>

https://www.w3schools.com/code/tryit.asp?filename=GHG13B8FTO3W

ถ้าสามารถใช้ ES6(ไม่แคร์ IE) ทำตาม คห.2
แต่ต้องเพิ่มอีกบรรทัด คือ ประกาศ array elements ในมิติที่ 1 ให้เป็น array ก่อน
ไม่งั้นจะเจอ undefined ตอนถ่ายค่ามิติ 2

Date : 2020-08-05 15:17:12

By : PhrayaDev

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : การ loop each div เพื่อหา ค่าของ elements โดยค่า elements นั้นก็เป็น arrays เช่นกัน (มีตัวอย่าง)

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก