다른 페이지의 클래스 계산 및 표시

Question

사이트에 문서를 추가 할 때 많은 작업을 저장하려면 자바 스크립트를 사용하여 클래스가 doc 인 요소 수를 계산하기로 결정했습니다.

나는 두 가지 주요 문제입니다 :

변수를 표시하는 문제가있다

• . 나는 이것이 function을 추가하지 않았기 때문에 이것이 처음에 생각했습니다. 그러나 이것을 추가하려고 시도했을 때 변수는 여전히 표시되지 않았습니다.

• 내가 계산하고 싶은 클래스의 요소는 다른 페이지에 있으며 어떻게 링크할지 모르겠다. 이를 위해 나는 작동하지 않은 var x = $('URL: /*pageURL*/ .doc').length;을 시도했다.

본질적으로 나는이 클래스 이름을 가진 전체 요소를 span 요소에 표시하려고합니다.

은 현재 내가 아래에 표시되는 내용을 비슷한 있습니다

<script> 
var Items = $('.doc').length; 
document.getElementById("display").innerHTML=Items; 
</script> 
<span id="display"></span> 

찾을 기사의 총 숫자가 표시되는 경우 here 비슷한 예.

편집 :이 코드는 홈페이지, domain.net/home.html에 추가됩니다

@ian . 이 문서가 포함 된 페이지 인 domain.net/documents.html에 링크하고 싶습니다. 나는 이것이 어딘가에서 행해지는 것을 보았습니다. 정확하게 기억한다면 그들은 코드 어딘가에 url:domainname.com/count을 사용했습니다. 희망이 도움이됩니다.

Answer 1

첫째, 당신은 document 당신의 코드가 당신이 조작 요소의 정의 후 을 배치하지 않는 한, DOM 요소를 조작하기 전에 준비가 될 때까지 기다릴 필요가, 느릅 나무는 예 그렇지 않습니다. function을 $에 전달하면 문서가 준비된 경우에만 실행됩니다. 당신의 요소가 다른 document에 속하는 경우 지금

$(function() { 
    //html() allows to set the innerHTML property of an element 
    $('#display').html($('.doc').length); 
}); 

, 그것은 분명 작동하지 않습니다.그러나 window.open을 사용하여 .doc 요소가 포함 된 문서를 보유하는 다른 창을 여는 경우 해당 페이지에 위 스크립트를 넣고 window.opener을 사용하여 상위 창의 span을 참조 할 수 있습니다.

$('#display', opener.document.body).html($('.doc').length); 

또 다른 대안은 다른 페이지의 콘텐츠에 액세스 할 아약스을 사용하는 것입니다. 여기에서 data은 your_other_page.html 문서의 HTML을 포함하므로 jQuery를 사용하여 DOM 구조처럼 조작 할 수 있습니다.

$.get('your_other_page.html', function(data) { 
    $('#display').html($('.doc', data).length); 
}); 

Answer 2

다음은 "./"(이 페이지) URL을 검색하고 "lsep" "$ ('. lsep', data) 클래스의 모든 요소에 대한 결과 데이터를 구문 분석하는 jQuery 호출입니다. 브라우저의 디버그 콘솔에서이 코드를 실행하면 5보다 큰 숫자가 반환됩니다. 기억해야 할

$.get("./", function(data, textStatus, jqXHR) 
{ 
    console.log("Instances of class: " + $('.lsep', data).length) 
}); 

한 가지 중요한 것은 당신의 전화를하려고하는 URL이 same origin하지 않을 경우 문제가 발생하는 것입니다. 브라우저의 디버그 콘솔에서 위의 코드를 실행하면

$(document).ready(
    function() 
    { 
     //var url = "/document.html" //this is what you'd have for url 
     //var container = $("#display"); //this is what you'd have for container 
     //var className = '.data'; //this is what you'd have for className 

     var url = "./"; //the document you want to parse 
     var container = $("#question-header"); //the container to update 
     var className = '.lsep'; //the class to search for 

     $.get(url, function (data, textStatus, jqXHR) { 
      $(container).html($(className, data).length); 
     }); 
    } 
); 

가 서로 계수 클래스 "의 질문 헤더 텍스트를 대체합니다 : 여기

는 설명하고 일을하는 코드의 업데이트 된 조각이다 페이지를 표시하고 그들을 표시 "클래스 이름".lsep "인스턴스 개수를 사용합니다.