jQuery - bộ chọn trên chuỗi html

Question

Tôi sẽ lấy một phần tử từ chuỗi html với jQuery, nhưng tôi luôn nhận được một số chưa được xác định trong bảng điều khiển của mình. Chuỗi của tôi là:

<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td> 

và tôi muốn lấy td.test.

Tôi đã thử nghiệm:

console.log($('.test', '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').innerHTML); 
console.log($('.test', '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').html()); 
console.log($('.test', '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').first().innerHTML); 

và một số chi tiết, nhưng không hoạt động:/

Có ai biết một giải pháp cho vấn đề của tôi?

Answer 1

Trước tiên, hãy sử dụng jQuery.parseHTML để phân tích cú pháp HTML thành một mảng các phần tử; sau đó bạn sẽ có thể chuyển đổi nó thành bộ sưu tập jQuery và sử dụng filter để hạn chế bộ sưu tập thành các phần tử phù hợp với bộ chọn.

var html = 
 
    '<td class="test">asd</td>' + 
 
    '<td class="second">fgh</td>' + 
 
    '<td class="last">jkl</td>'; 
 

 
var text = $($.parseHTML(html)).filter('.test').text(); 
 

 
console.log(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Hãy thử:

console.log($('<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>').filter('.test').html()); 

hay:

console.log($('.test', '<table><td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td></table>').html()); 

Answer 3

Tôi có một câu trả lời đó là có dạng:

<div>... 
</div> 

<div>... 
</div> 

<div>... 
</div> 

Và phương pháp của @minitech dẫn đến một loạt các nút HTML trong đó công cụ chọn không hoạt động.

Vì vậy, tôi đã cố gắng này và nó làm việc ra đẹp:

$.ajax({ 
    url: 
    success: function($data) { 
     var $parsed_data = $('<div/>').append($data); 
     var found = $parsed_data.find(".Selector"); 
     ... 
    } 
}); 

Answer 4

Bạn không thể sử dụng bộ chọn jQuery trên một tập hợp các nút như thế này. Bạn có thể bọc trong một nút duy nhất để giải quyết vấn đề này, vì vậy, chỉ cần thêm ví dụ: một gói <tr> nút.

var htmlBits = '<tr>' 
    + '<td class="test">asd</td><td class="second">fgh</td><td class="last">jkl</td>' 
    + '</tr>'; 

Và sau đó nó sẽ làm việc:

console.log($('.test', htmlBits).text()); // outputs 'asd' 

JSFiddle (nhớ để xem giao diện điều khiển để xem log).