用于多个项目的Ajax加载程序脚本

Question

我有这样的列表元素

<ol class="listItem">
    <li id="#item-1" class="NewsFeedItem">
        <a href="someurl.com" class="threadLink">Example Url</a>
        <div class="attachedImage"></div>
    </li>
    <li id="#item-2" class="NewsFeedItem">
        <a href="someurl2.com" class="threadLink">Example Url 2</a>
        <div class="attachedImage"></div>
    </li>
    <li id="#item-3" class="NewsFeedItem">
        <a href="someurl3.com" class="threadLink">Example Url 3</a>
        <div class="attachedImage"></div>
    </li>
    ...
</ol>

我只想使用一个脚本为每个li加载内容。 我在这里写了一些代码，但是没有用

$('.NewsFeedItem').each(function() {
var id = $(this).get(0).id;

$('#' + id + '.attachedImage').load( $('#' + id + '.threadLink').attr('href') + ' .firstPost .messageText img' );

});

我哪里错了？

Answer 1

您的代码很好，除了两点。 要选择后代，需要用空格分隔选择器，该行在此行中缺少：

$('#' + id + ' .attachedImage').load( $('#' + id + ' .threadLink').attr('href') ...

像选择器#id.attachedImage将查找具有ID作为元素id ，具有类attachedImage分配给它。

如果你想选择一个元素，有一类attachedImage分配给它，这是ID的元素的后代id ，你需要写选择为#id .attachedImage 。

---

编辑1：

由于id中的值已经有# ，因此您还需要从选择器中删除# ：

$( id + ' .attachedImage').load( $( id + ' .threadLink').attr('href') ...

Answer 2

只需删除“＃”

$( id + '.attachedImage').load( $( id + '.threadLink').attr('href') + '.firstPost .messageText img' );