2011-01-24 24 views
6

Tôi mới sử dụng Protoype.JS và chỉ thử nghiệm một chút vì tôi nghe nó là tốt, nhưng tôi bị kẹt khá nhanh. Dễ dàng như thế này với jQuery, có vẻ như là kết thúc của thế giới để lấy văn bản trong một phần tử. Tôi đã thử innerHTML theo nhiều cách nhưng điều duy nhất tôi có thể nhận được là "không xác định".Prototype.js nhận văn bản từ một thành phần

alert($$('.mnu_item').innerHTML); 
alert($('content').innerHTML); 

Không có tác phẩm nào trong số này hoạt động. Nội dung là một div có id "content" và .mnu_item là một thẻ neo với lớp ".mnu_item". Tôi không hiểu vấn đề là gì, có lẽ là điều ngu ngốc nhưng sẽ tuyệt vời nếu ai đó có thể chỉ cho tôi đúng hướng!

EDIT: Tôi thấy rằng đó không phải là innerHTML không hoạt động nhưng đó là bộ chọn lớp. Dòng thứ hai trong đoạn mã trên không hoạt động. Làm thế nào tôi có thể chọn một phần tử theo lớp của nó trong phiên bản Prototype mới nhất nếu đây không phải là cách chính xác?

+0

sử dụng jQuery và chỉ cần gọi $ ('content ') .html(); để truy xuất html –

+2

Vần giáo dục: Thật khó để nói mà không có HTML. – acme

Trả lời

6

DOM có được tải khi bạn chạy tập lệnh không? Nếu bạn không chạy mã này trong một số window.onload hoặc bằng cách đặt mã này ở đầu kết thúc của phần thân, thì các phần tử không tồn tại khi nó chạy.

Thử đặt tập lệnh của bạn ngay bên trong thẻ đóng </body>.

<body> 
    <!-- my content --> 

    <script type="text/javascript"> 
     alert($('content').innerHTML); 
    </script> 
</body> 

Ngoài ra, dòng đầu tiên của bạn là chọn một cách chính xác, nhưng sẽ trả về một mảng của các yếu tố, vì vậy innerHTML sẽ undefined.

Để lặp Array, bạn có thể làm điều này:

$$('.mnu_item').each(function(val,i) { 
    alert(val.innerHTML); 
}); 

hoặc nếu bạn muốn kết thúc với một mảng của innerHTML giá trị, thực hiện điều này:

var values = $$('.mnu_item').map(function(val,i) { 
    return val.innerHTML; 
}); 
+0

Xin cảm ơn! Tôi không biết nó đã trở lại một mảng, như tôi đã nói, vấn đề khá ngu ngốc. – hhoud

+0

@ hh354: Bạn được chào đón. – user113716

0

$ ('nội dung'). InnerHTML sẽ hoạt động. Kiểm tra HTML của bạn, đảm bảo ID là duy nhất.

1

Hãy chắc chắn rằng DOM được tải trước khi bạn chạy các thử nghiệm này:

$(document).on('dom:loaded', function() { 
    /* code to execute after dom has loaded */ 
}) 

Dòng đầu tiên của mã $$ ('. Mne_item') không hoạt động vì $$ trả về một mảng của tất cả các phần tử phù hợp với quy tắc css. Vì vậy, $$ ('. Mne_item') cho một mảng của tất cả các phần tử dom có ​​lớp mne_item. Bạn có thể yêu cầu một trong những đầu tiên bằng cách sử dụng các phương pháp đầu tiên hoặc lặp qua tất cả các mục như thế này:

$$('.mne_item').each(function(elem) { 
    // elem is the li elements extended by all Element methods of prototype 
}); 

Nếu bạn sử dụng $ trong jQuery, nó thực sự sử dụng một mô hình tương tự nhưng ẩn từng xây dựng. Nó chỉ áp dụng phương pháp xích cho tất cả các phần tử hay chỉ là phần tử đầu tiên.

Dòng thứ hai của mã $ ('nội dung'). InnerHTML sẽ hoạt động. $ là lối tắt cho document.getElementById để nó sẽ cung cấp cho bạn nút DOM trở lại. Lý do tại sao điều này không làm việc là không có nút nơi id = nội dung, có lẽ vì dom không được tải được nêu ra.

Đối với thông tin thêm về các phương pháp của nguyên mẫu nhìn vào api: http://api.prototypejs.org/

Ngoài ra kiểm tra các phương pháp DOM mặc định: http://quirksmode.org/dom/w3c_core.html

+0

Có sự khác biệt nào khi sử dụng $ (tài liệu) .on ('dom: loaded', function() {...}); trái ngược với document.observe ('dom: loaded', function() {...}); Tôi giả định không ... không bao giờ nhìn thấy dom: nạp được sử dụng trên on() trước:/ – VBAssassin

+1

Họ hành động giống nhau, trên là một phương pháp mới hơn mà cũng có thể xử lý một đối số chọn (xem API) –

0

var text = $$ ('nhãn [cho = "display_on_amazon"]') .first(). textContent;

Mã trên đã hiệu quả đối với tôi.

Về, $$ ('mnu_item.'). InnerHTML

Khi bạn đang cố gắng để lấy với selector lớp, nguyên mẫu trả về mảng nhiều elments, bằng cách sử dụng [0] hoặc đầu tiên) hệ thống phương pháp (sẽ chỉ ở phần tử đầu tiên trong mảng đó, sau đó bạn có thể sử dụng innerHtml (để lấy html bên trong phần tử) hoặc textContent (để lấy nội dung văn bản của phần tử đó, phương thức javascript gốc)

Các vấn đề liên quan