Question

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

主页：

<div id="news-autoloader">

</div>

Newspage：

<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

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

<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）我如何限制字数而不是字符（所以缩写句子是完整的）。

TIA !!!

Answer 1

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

如果您打算从id news的元素中获取HTML，则需要将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>

Answer 2

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

传递变量以追加

2 个答案: