jQuery เพื่อทำให้เป็นอนุกรมเฉพาะองค์ประกอบภายใน div

ฉันต้องการที่จะได้รับผลเช่นเดียวกับjQuery.serialize()แต่ผมอยากจะกลับมาเพียง elments divเด็กได้รับ

ตัวอย่างผลลัพธ์:

single=Single2&multiple=Multiple&radio=radio1

ไม่มีปัญหา. เพียงใช้สิ่งต่อไปนี้ สิ่งนี้จะทำงานเหมือนกับการทำให้เป็นอนุกรมของฟอร์ม แต่ใช้เนื้อหาของ div แทน

$('#divId :input').serialize();

ตรวจสอบhttps://jsbin.com/xabureladi/1สำหรับการสาธิต ( https://jsbin.com/xabureladi/1/ แก้ไขสำหรับรหัส)

คุณสามารถปรับปรุงความเร็วของรหัสของคุณได้หากคุณ จำกัด รายการที่ jQuery จะดู

ใช้ตัวเลือก: อินพุตแทน*เพื่อให้บรรลุ

$('#divId :input').serialize()

วิธีนี้จะทำให้โค้ดของคุณเร็วขึ้นเนื่องจากรายการมีขนาดสั้นลง

serializeองค์ประกอบฟอร์มทั้งหมดภายในไฟล์div.

คุณสามารถทำได้โดยกำหนดเป้าหมาย div #target-div-idภายในformโดยใช้:

$('#target-div-id').find('select, textarea, input').serialize();

ฟังก์ชันที่ฉันใช้ในปัจจุบัน:

/**
 * Serializes form or any other element with jQuery.serialize
 * @param el
 */
serialize: function(el) {
    var serialized = $(el).serialize();
    if (!serialized) // not a form
        serialized = $(el).
          find('input[name],select[name],textarea[name]').serialize();
    return serialized;
}

ลองสิ่งนี้ด้วย:

$ ('# divId'). find ('input'). serialize ()

วิธีแก้ปัญหาของฉัน:

function serializeDiv( $div, serialize_method )
{
    // Accepts 'serialize', 'serializeArray'; Implicit 'serialize'
    serialize_method = serialize_method || 'serialize';

    // Unique selector for wrapper forms
    var inner_wrapper_class = 'any_unique_class_for_wrapped_content';

    // Wrap content with a form
    $div.wrapInner( "<form class='"+inner_wrapper_class+"'></form>" );

    // Serialize inputs
    var result = $('.'+inner_wrapper_class, $div)[serialize_method]();

    // Eliminate newly created form
    $('.script_wrap_inner_div_form', $div).contents().unwrap();

    // Return result
    return result;
}

/* USE: */

// For: $('#div').serialize()
serializeDiv($('#div')); /* or */ serializeDiv($('#div'), 'serialize');

// For: $('#div').serializeArray()
serializeDiv($('#div'), 'serializeArray');

function serializeDiv( $div, serialize_method )
{
	// Accepts 'serialize', 'serializeArray'; Implicit 'serialize'
	serialize_method = serialize_method || 'serialize';

	// Unique selector for wrapper forms
	var inner_wrapper_class = 'any_unique_class_for_wrapped_content';

	// Wrap content with a form
	$div.wrapInner( "<form class='"+inner_wrapper_class+"'></form>" );

	// Serialize inputs
	var result = $('.'+inner_wrapper_class, $div)[serialize_method]();

	// Eliminate newly created form
	$('.script_wrap_inner_div_form', $div).contents().unwrap();

	// Return result
	return result;
}

/* USE: */

var r = serializeDiv($('#div')); /* or serializeDiv($('#div'), 'serialize'); */
console.log("For: $('#div').serialize()");
console.log(r);

var r = serializeDiv($('#div'), 'serializeArray');
console.log("For: $('#div').serializeArray()");
console.log(r);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  <input name="input1" value="input1_value">
  <textarea name="textarea1">textarea_value</textarea>
</div>

หากองค์ประกอบเหล่านั้นมีชื่อคลาสทั่วไปอาจใช้สิ่งนี้ด้วย:

$('#your_div .your_classname').serialize()

:inputวิธีนี้คุณสามารถหลีกเลี่ยงการเลือกปุ่มซึ่งจะเลือกใช้ตัวเลือก jQuery แม้ว่าสิ่งนี้สามารถหลีกเลี่ยงได้โดยใช้$('#your_div :input:not(:button)').serialize();

$('#divId > input, #divId > select, #divId > textarea').serialize();