0

在主页上，JS 将从新闻页面中抓取最多三个新闻故事，并将显示链接到完整故事的缩写版本。我遇到的问题是我试图连接的变量之一没有按预期进行。

主页：

<div id="news-autoloader">

</div>

新闻页面：

<h3 id="news1">News Item 1</h3>

<p>Lorem ipsum dolor sit amet...</p>

<h3 id="news2">News Item 2</h3>

<p>Lorem ipsum dolor sit amet...</p>

// more or less of the same news items

新闻页面可能没有项目，但我们将捕获最多三个，首先是标题，然后是 h3 标题后面的第一个 p 的 n 个字符（宁愿捕获 n 个单词，但那是在解决此问题之后！）。

<script>
$.get('company-news.html',
    function(data){
        var news1 = $(data).find('#news1 + p');
        var news2 = $(data).find('#news2 + p');
        var news3 = $(data).find('#news3 + p');

// see how many news items there are (there's probably a more graceful way of doing this!):

    if (news1.html() == null){
        var items = 0;
    } else if (news2.html() == null){
        var items = 1;
    } else if (news3.html() == null){
        var items = 2;
    } else {
        var items = 3;
    }

    if (items == 0){
        $('#news-autoloader').append('<h3>No News.</h3>');
    } else {
        for (i=1; i<=items; i++){
            var abc = '#news' + i;
            var def = 'news' + i;
            var url   = 'a href="company-news.html#news' +i;

            $('#news-autoloader').append($(abc,data)).append('<p>' + def.html().substr(0, 175) + ' <' + url + '">More</a></p>');
        }
    }
}, 'html');
</script>

一切正常 -abc在第一个附加中正确评估，但在我们的第二个附加中，变量def没有。

我想知道三件事：

1）我如何def在第二个附录中工作，

2）有没有更优雅的方法来查找新闻项目的数量，

3）我如何限制字数而不是字符（所以缩写的句子是完整的）。

蒂亚！！！

4

2 回答 2

2

您的问题是您调用...def.html()....并且def既不是 jQuery 对象也不是元素。相反， 的值def是'news' + i，其中i是迭代次数。

如果您的意图是从带有idof的元素中获取 HTML，news那么您需要将 的值更改def为'#news' + i，然后包装def成一个 jQuery 对象$(def), 函数：

...$(def).html()....


更新

如果我再次误解了您，而您要做的是渲染变量news1,news2和news3，那么您应该将这些变量放入一个数组中。

不使用数组就不能从 JavaScript 中的字符串引用变量。

如果是这种情况，您更新的代码将如下所示：

<script>
$.get('company-news.html',
    function(data){
        var newsData = [];
        newsData["news1"] = $(data).find('#news1 + p');
        newsData["news2"] = $(data).find('#news2 + p');
        newsData["news3"] = $(data).find('#news3 + p');

// see how many news items there are (there's probably a more graceful way of doing this!):

    if (newsData["news1"].html() == null){
        var items = 0;
    } else if (newsData["news2"].html() == null){
        var items = 1;
    } else if (newsData["news3"].html() == null){
        var items = 2;
    } else {
        var items = 3;
    }

    if (items == 0){
        $('#news-autoloader').append('<h3>No News.</h3>');
    } else {
        for (i=1; i<=items; i++){
            var abc = '#news' + i;
            var def = 'news' + i;
            var url   = 'a href="company-news.html#news' +i;

            $('#news-autoloader').append($(abc,data)).append('<p>' + $(newsData[def]).html().substr(0, 175) + ' <' + url + '">More</a></p>');
        }
    }
}, 'html');
</script>
于 2013-04-13T03:49:44.190 回答
1

1 更改def.html()为$(abc).html()它还不是 JQuery 对象

2 您可以将每个新闻对象存储在一个数组中，然后遍历该数组以添加您的项目。

var newsItems = [];  
for(var i = 1; i < 4; i++){  
    var newsElem = $(data).find('#news' + i + ' + p');  
    if(newsElem.html() != null){  
        newsItems.push(newsElem);  
    }  
}

3 根据 def 的内容，类似这样的方法可能会获得前 10 个单词。将text()去除 HTML 标签，因此如果您需要保留这些标签，则工作量会更大。

$(newsItems[i]).text().split(' ').slice(0,10);
于 2013-04-13T04:02:42.830 回答