Question

我在下面有以下HTML代码（不完整的html文件，但它足以理解问题）。我试图从h3元素中提取值以及p元素中的数据。例如，我希望有这种格式：

NYC Row Restaurant Week
From April 20st through April 28th

Mother's Day at Restaurant
May 11th, 2014

A new lunch experience at Restaurant
Beginning February 5th

我想提取这些值的原因是因为我想将它们输入到代码的其他部分（即jquery手风琴类型按钮）

以下示例HTML

    <ul class="press">
                            <li>
                    <h3>
                        <a href="/about/calendar/nyc-row-restaurant-week-2">NYC Row Restaurant Week</a>                     </h3>
                    <p class="date">
                        From April 20st through April 28th                      </p>
                </li>
                                    <li>
                    <h3>
                        <a href="/about/calendar/mothers-day-at-restaurant-nyc">Mother&#039;s Day at Restaurant</a>                     </h3>
                    <p class="date">
                        May 11th, 2014                      </p>
                </li>
                                    <li>
                    <h3>
                        <a href="/about/calendar/a-new-lunch-experience-at-restaurant-4">A new lunch experience at Restaurant!</a>                      </h3>
                    <p class="date">
                        Beginning February 5th                      </p>
                </li>


                            <li>

我的JavaScript和HTML文件

<html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"    
type="text/javascript"></script>
<script type="text/javascript">
var your_url = 'http://www.jaleo.com/about/calendar';
</script>

<script type="text/javascript">
// jquery.xdomainajax.js  ------ from padolsey

jQuery.ajax = (function(_ajax){

var protocol = location.protocol,
    hostname = location.hostname,
    exRegex = RegExp(protocol + '//' + hostname),
    YQL = 'http' + (/^https/.test(protocol)?'s':'') +  '://query.yahooapis.com/v1/public/yql?callback=?',
    query = 'select * from html where url="{URL}" and xpath="*"';

function isExternal(url) {
    return !exRegex.test(url) && /:\/\//.test(url);
}

return function(o) {

    var url = o.url;

    if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) {

        // Manipulate options so that JSONP-x request is made to YQL

        o.url = YQL;
        o.dataType = 'json';

        o.data = {
            q: query.replace(
                '{URL}',
                url + (o.data ?
                    (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
                : '')
            ),
            format: 'xml'
        };

        // Since it's a JSONP request
        // complete === success
        if (!o.success && o.complete) {
            o.success = o.complete;
            delete o.complete;
        }

        o.success = (function(_success){
            return function(data) {

                if (_success) {
                    // Fake XHR callback.
                    _success.call(this, {
                        responseText: data.results[0]
                            // YQL screws with <script>s
                            // Get rid of them
                            .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
                    }, 'success');
                }

            };
        })(o.success);

    }

    return _ajax.apply(this, arguments);

};

})(jQuery.ajax);



 $.ajax({
   url: your_url,
   type: 'GET',
   success: function(res) {

   var result = res.responseText;
   var myHtml = $(result).find('h3').text();
   //I get stuck here and I'm not sure how to get the results in the format i specified above (in the question portion)
   alert(myHtml);

}
});
</script>
</html>

Answer 1

尝试提取子元素的文本，然后根据需要重新组合它们：

var arr = [];
$(result).find('li').each(function() {
    var title = $(this).find('h3 a').text();
    var dat = $(this).find('.date').text();
    arr.push(title + "<br>" + dat);
}); // arr is an array of HTML strings

Answer 2

使用each()：

循环浏览列表

$.ajax({
   url: your_url,
   type: 'GET',
   success: function(res) {

   var result = res.responseText;
   var myHtml = $(result).find('li');

    myHtml.each(function(){
        alert($(this).find("p").text());
        alert($(this).find("h3").text());
    });

}

如何使用JQuery从html中提取数据

2 个答案: