IT

div 내의 요소 만화하는 jQuery

lottoking 2020. 8. 6. 22:19
반응형

div 내의 요소 만화하는 jQuery


나는 같은 효과를 원 jQuery.serialize()하지만 주어진의 아이 엘먼트 만 반환하고 싶습니다 div.

결과 :

single=Single2&multiple=Multiple&radio=radio1

문제 없어요. 다음을 사용하십시오. 이것은 양식 작성 화와 똑같이 동작하지만 div의 내용을 사용합니다.

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

는 데모 http://jsbin.com/azodo확인하십시오 ( 코드는 http://jsbin.com/azodo/edit ).


jQuery가 볼 항목을 제한하면 코드 속도를 높일 수 있습니다.

* 대신에 선택기 : 입력을 사용하십시오 .

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

항목 목록이 더 짧기 때문에 코드가 더 빨라집니다.


serialize내의 모든 형태 요소 div.

#target-div-id다음을 form사용하여 div를 대상으로 사용할 수 있습니다 .

$('#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'). 찾기 ( '입력'). 직렬화 ()


내 솔루션은 어떻습니까?

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
    $('.scriptwrap_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
	$('.scriptwrap_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>


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

해당 요소에 공통 클래스 이름이있는 경우 다음을 사용할 수도 있습니다.

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

이렇게하면 jQuery 선택기를 사용하여 선택되는 버튼 선택을 피할 수 있습니다 :input. 사용하여 피할 수도 있다고$('#your_div :input:not(:button)').serialize();

참고 URL : https://stackoverflow.com/questions/1829519/jquery-to-serialize-only-elements-within-a-div

반응형