특정 클래스를 가진 페이지를 제외한 모든 HTML 페이지 가져 오기

목표는 체크 박스가 선택되지 않은 페이지를 제외한 모든 HTML을 가져 와서 스크립트에 게시하는 것입니다.특정 클래스를 가진 페이지를 제외한 모든 HTML 페이지 가져 오기

요소의 클래스 인 값을 가진 체크 박스를 사용하면됩니다. 예를 들어, 내 체크 박스가 테이블에 있고 행에 있습니다. ...

원하는 모든 내용은 #page_content입니다. 내용이 컨테이너에 대해 알지 못함에 따라 체크 박스는 테이블 내부에 있음을 알지 못하므로 주위를 둘러 쌀 수 없으므로 페이지에서 모든 것을 가져오고 체크되지 않은 요소를 제거하는 것이 더 쉽다고 생각했습니다. . 그런 식으로 내 마크 업은 정확합니다.

jQuery를 사용하여이 작업을 수행하고 있지만 올바르게 접근하는 방법을 모르겠습니다. 내가 염두에두고있는 방법은 모든 체크되지 않은 체크 박스를 가져 와서 그 값을 변수 'unchecked'에 저장하는 것입니다.

나는 요소를 가져올 수있는 outerHTML() 함수를 가지고 있으며 html입니다.

은 그 때 나는

$('#export').click(function(e) { 
     e.preventDefault(); 
     var uc, unchecked = [], html; 
     $('input:checkbox:not(:checked)').each(function() { 
      unchecked.push("." + $(this).val()); 
     }); 
     uc = unchecked.join(',') + ",.actions,input,button,.btn"; 
     console.log(uc); 
     $('#page_content').find('*').not(uc).each(function() { 
      html += $(this).outerHTML(); 
     }); 
     console.log(html); 
     // $('#export-data').val(html); 
     // console.log($('#export-data').val()); 
    });

그 다음의 말에 나는 모든 HTML의 문자열을 가지고있다.

업데이트 : 조금 더 익숙해졌지만, 뭔가 혼란스러워졌습니다. 또한 입력 및 버튼과 다른 클래스를 스트라이핑하여 올바른 작업을 수행하고 있지만 출력에 많은 중복이 포함되어 있다고 생각합니다. 음 ...

출처

2012-11-20 stabbie

확인을 실행할 준비가 그것을 명확하고 더 JQuery와 틱 :

var filter, html, el, unchecked = [], additional, elements; 
$('input:checkbox:not(:checked)').each(function() { 
    unchecked.push("#" + $(this).val()); 
}); 
// We remove checkboxes, cb colums, inputs, etc 
additional = ".actions,input,button,.btn,textarea,.cb"; 
if (unchecked.length) { 
    filter = unchecked.join(',') + "," + additional; 
} else { 
    filter = additional; 
} 
var $elements = $('#page_content').clone(); 
$elements.find(filter).remove(); 
html = $elements.outerHTML();

출처

2012-11-23 02:26:43 stabbie

안녕하세요, 어떻게 할 수 있습니까? 이 예제에서는 green 클래스를 제외한 모든 요소를 반환합니다.

코드를 붙여 복사하고 내가 찾은 내 방법을 사용하여

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
    <style> 
    DIV{ 
     width:200px; 
     height:200px; 
     display:inline-block; 
    } 
    .black{ 
     background:black; 
    } 
    .yellow{ 
     background:yellow; 
    } 
    .red{ 
     background:red; 
    } 
    .green{ 
     background:green; 
    } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="1" class="yellow"></div> 
     <div id="2" class="black"></div> 
     <div id="3" class="red"></div> 
     <div id="4" class="green"></div> 
    </div> 
</body> 
<script> 
    $(document).ready(function(){ 
     var elements = $('*'); 
     var filterClass = 'green'; 
     elements = $.grep(elements,function(elementOfArray, indexInArray){ 
      clas = $(elementOfArray).attr('class'); 
      if(typeof(clas) === 'undefined'){ 
       console.log('undef'); 
       return elementOfArray 
      } 
      if(clas.indexOf(filterClass) == -1){ 
       return elementOfArray; 
      } 
     }); 
     console.log(elements); 
    }); 

</script>

출처

2012-11-20 08:32:13 Billybonks

내가 업데이트 된 원래의 게시물 당신에게 더 많은 아이디어를 줄 수 있습니다. 나는 다른 것들을 제거해야합니다. 어쩌면 찾을 수 있습니다 ('*') 최고의 사용하지 않는가? – stabbie

방금 예제 (*)를 사용 했으므로 배열의 요소를 가져 와서 grep 메서드를 통해 구문 분석하면됩니다. 나는 당신의 HTML을 확신 할 수 없기 때문에 내가 도와 줄 수 없다. – Billybonks

나는 입력, 클래스, 텍스트 영역 등등의 목록을 grep하는 방법을 잘 모르겠다. – stabbie

특정 클래스를 가진 페이지를 제외한 모든 HTML 페이지 가져 오기

답변

관련 문제