jQuery - html 字符串上的选择器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9551230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 10:57:45  来源:igfitidea点击:

jQuery - selectors on a html string

jqueryhtmlstringjquery-selectors

提问by MaxiNet

I am going to get a element from a html-string with jQuery, but I always get an undefined in my console. My String is:

我将使用 jQuery 从 html 字符串中获取一个元素,但我总是在我的控制台中得到一个 undefined 。我的字符串是:

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

and I want to get the td.test.

我想得到 td.test。

I've tested:

我测试过:

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);

and some more, but nothing works :/

还有一些,但没有任何效果:/

Does anyone know a solution for my problem?

有谁知道我的问题的解决方案?

回答by Ry-

First, use jQuery.parseHTMLto parse the HTML into an array of elements; then you'll be able to convert it to a jQuery collection and use filterto restrict the collection to elements matching a selector.

首先,使用jQuery.parseHTML将HTML解析为元素数组;然后您将能够将其转换为 jQuery 集合并用于filter将集合限制为与选择器匹配的元素。

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>

回答by Charles Goodwin

You can't use jQuery selectors on a collection of nodes like this. You can wrap in a single node to work around this, so just add e.g. a wrapping <tr>node.

您不能在这样的节点集合上使用 jQuery 选择器。您可以包装在单个节点中以解决此问题,因此只需添加例如包装<tr>节点。

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

And then it will work:

然后它会起作用:

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

JSFiddle(remember to view the console to see the log).

JSFiddle(记得查看控制台查看日志)。

回答by J. Bruni

Try:

尝试:

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

or:

或者:

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

回答by juanmf

I have a response that is of the form:

我有以下形式的回复:

<div>...
</div>

<div>...
</div>

<div>...
</div>

And @minitech 's method resulted in an array of HTML nodes in which the selector didn't work.

@minitech 的方法产生了一个 HTML 节点数组,其中选择器不起作用。

So I tried this and it worked out nice:

所以我尝试了这个,结果很好

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