35

私はQUnitを使用$.ajax()してテストを作成し、ローカルで実行されている開発サイトからいくつかのテストのHTMLを取得するために使用しています。

add_elements = function(location, selector) { 
  $.ajax(location, {async: false}).done(function(data) {
    stor.$els = $(selector, $.parseHTML(data));
    stor.$els.appendTo($('body'));
  })
}

特定の場所でこの関数を使用すると、コールバックに次のようにdata渡されます。.done()

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>

<body>
<div id="app-container" class="container-fluid">
    <div class="page-header">
        <h1>
            <a href="/">Home</a>
            <small>Text</small>
        </h1>
    </div>

    <div id="hero-units" class="carousel-inner slide">

        <div class="hero-unit home item active">
            <h1>
                Text text text
            </h1>
            <p>
                More text!
            </p>
            <div id="app-nav">
                <a id="lets-go" class="btn btn-primary btn-large nav-forward" href="/what-up/">
                    Let's go
                </a>
            </div>
        </div>

    </div>
</div>

<script src="/static/js/jquery.js"></script>
<script src="/static/js/underscore.js"></script>
<script src="/static/js/backbone.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/site-fiddle.js"></script>
<script src="/static/js/site.js"></script>

</body>
</html>

isまたは。の場合はすべて機能しますが、selectorisの場合は何も返しません。そして、要素のオブジェクトが必要です。#hero-units.hero-unit$(selector, $.parseHTML(data))selector#app-containerjQuerydiv#app-container

そして、これが私を殺すものです：

  • $.parseHTML(data) 要素が含まれていdiv#app-containerます。ただ$.parseHTML(data)[7]です。
  • しかし、$('#app-container', $.parseHTML(data))は空の配列です。
  • $('div', $.parseHTML(data))内のすべてのdivsが含まれますdiv#app-containerが、それ自体は含まれませんdiv#app-container。

何が起きてる？何が起こっているのかというと、または$によって返されるトップレベルの要素のいずれも見ておらず、その子だけを見ているようです。$.parseHTML(data)$($.parseHTML(data)))

jQueryこれからオブジェクトを取得するにはどうすればよいですdiv#app-containerか$.parseHTML(data)？

答え

-$(selector, $.parseHTML(data))スタイルのルックアップはを使用し$.findます。このjQueryオブジェクトのトップレベルの要素を探しているので、$.filter代わりに使用する必要があります。出来上がり。

4

7 に答える 7

38

.parseHTML()jQueryがそれをトラバースして検索する前にDOMツリーを作成するように、最初の結果を追加するDOM要素を作成する必要がありますdiv#app-container。

var tempDom = $('<output>').append($.parseHTML(str));
var appContainer = $('#app-container', tempDom);

私はあなたの例を使用してそれを機能させました：http：//jsfiddle.net/gEYgZ/

.parseHTML()関数がタグを詰まらせているように見えるので、タグ<script>を削除する必要がありました。

PS。明らかに<output>、実際のHTMLタグではなく、例として使用するだけです。

于 2013-03-14T07:56:31.430 に答える
12

あなたはこれを試すことができます：

$($.parseHTML('<div><span id="foo">hello</span></div>')).find('#foo');

あなたで始まる文字列の<場合、そのコードを次のように短くすることができます。

$('<div><span id="foo">hello</span></div>').find('#foo');
于 2013-03-14T07:53:38.280 に答える
4

ちょうどこれに遭遇しました。

$.parseHTMLDOM要素のバニラを返すことが判明しましたがArray、それは必要なjQuery検索をサポートしていません。

これは、HTML文字列をjQueryオブジェクトに変換するための最もクリーンなソリューションだと思います。

var html = '<div><span id="foo">hello</span></div>';
var $foo = $(html).find('#foo');

注：$.trimjQueryが空白で混乱しないように、html文字列を使用することをお勧めします。

于 2014-09-05T06:50:55.877 に答える
3

HTMLがDOMの一部ではないこととは何の関係もありません。なんらかの理由で、解析されたHTMLの最上位タグが見つからないというだけです。探している要素が別のタグでラップされている場合、検索は期待どおりに機能します。ところで、bodyタグで要素をラップすることは機能しませんが、私が試した他のすべては正常に機能します。

var bad = $.parseHTML('<ul><<li><one/li>/<li>two</li></ul>');
console.log($(bad).find('li').length);  //will be 2
console.log($(bad).find('ul').length);  //will be 0 

var good = $.parseHTML('<div><ul><<li><one/li>/<li>two</li></ul></div>');
console.log($(good).find('li').length); //will be 2
console.log($(good).find('ul').length); //will be 1

これは間違いなくjQuery1.11の場合であり、それ以降のバージョンで何が起こるかはわかりません。これがデモンストレーションを行うフィドルです：http：//jsfiddle.net/ndnnhf94/

于 2014-11-20T02:33:46.593 に答える
2

上記の答えは私にはうまくいきませんでした、これはうまくいきました：

jQuery.parseHTMLを使用して、HTMLを要素の配列に解析します。次に、それをjQueryコレクションに変換し、フィルターを使用してコレクションをセレクターに一致する要素に制限することができます。

var html =
'<td class="test">asd</td>' +
'<td class="last">jkl</td>';
var obj = $($.parseHTML(html)).filter('.test');
于 2019-07-11T09:07:50.957 に答える
0

私はあなたがこれで試してみるべきだと思います：

$('body', $.parseHTML(data))
于 2013-03-14T07:44:59.790 に答える
0

特にidで要素を検索する必要がある場合は、これでうまくいくと思います。

function findInParsed(html, selector){
    return $(selector, html).get(0) || $(html).filter(selector).get(0);
}

オブジェクトのjqueryバージョンが必要な場合は、これで取得できます

function findInParsed(html, selector){
    var check = $(selector, html).get(0);
    if(check)
        return $(check);
    check = $(html).filter(selector).get(0)
    return (check)? $(check) : false;
}
于 2015-09-13T22:42:42.780 に答える