1

プラグイン List.js を使用しています。その正常に動作します。しかし、画像の src または href 値を追加する方法がわかりません。やその他のタグで問題なく動作します。

List.js の URL は次のとおりです。 http://listjs.com/

ここにドキュメントがあります。https://github.com/javve/list

これが私のコードです。

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<div id="Div1">
    <input class="search" id="Text1" />
    <span class="sort" data-sort="name">Sort by name</span>
    <span class="sort" data-sort="desc">Sort by desc</span>
    <ul class="list">
    </ul>
</div>

<div style="display: none;">

    <div id="hacker-item1">

        <div style="width: 20%; float: left">
            <table>
                <tr>
                    <td colspan="2" align="center" valign="top">

                        <a href="">

                            <img alt="" width="125" height="125" border="0" class="name">



                            </img>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" class="desc">

                        <br></br>

                    </td>
                    <td class="createdDate"></td>
                </tr>
            </table>
        </div>

        <h3 class="name"></h3>
        <p class="desc"></p>
        <p class="createdDate"></p>
    </div>
</div>
<script src="list.js"></script>

<script type="text/javascript">

    var options = {
        item: 'hacker-item1'
    };

    var values = [
{ name: 'Jonny', desc: 'Stockholm', createdDate: 'June 8, 2013' }
, { name: 'Jonny', desc: 'Stockholm', createdDate: 'May 8, 2013' }
, { name: 'sssssss', desc: 'eeeeeeeee', createdDate: 'June 20, 2013' }
    ];
    //    values.push({name : xml.getElementsByTagName("title")[0].childNodes[0].nodeValue, desc : xml.getElementsByTagName("title")[0].childNodes[0].nodeValue,createdDate : xml.getElementsByTagName("publishdate")[0].childNodes[0].nodeValue});
    var hackerList = new List('Div1', options, values);
    //alert(hackerList.items.length + '--');

</script>

4

6 に答える 6

6

これが私が見つけた解決策です。

var options = {
    valueNames: [
        'name',
        { attr: 'href', name: 'link'},
        { attr: 'src', name: 'image'}
    ],
    // This describes how items must look like in HTML
    item: '<li><a class="link"><img class="image"><h4 class="name"></h4></a></li>'
}
var values = [
    {
        name: 'John Cena',
        image: 'http://someimage.com/a.png',
        link: 'http://johncena.com'
    },
    {
        name: 'Matt Damon',
        image: 'http://someimage.com/b.png',
        link: 'http://thebournidentity.com'
    }
]
var usersList = new List('your-list', options, values);

関連する HTML コードは次のようになります。

<div id="your-list">
    <input class="search" placeholder="Search">
    <ul id="list"></ul>
</div>

item指定した が でラップされていない場合、これは機能しないことに注意してください<li>。

于 2016-11-05T02:15:31.777 に答える
2

すべてのオブジェクトをループすることで、既存のリストにリスト項目を追加できます。次の例を参照してください。

http://codepen.io/hugoborjesson/pen/zLluo

例に示すように、画像の src と href を js で追加できます。

var ul = jQuery('ul.list');
jQuery.each( values, function( i, item ) {
    ul.append( 
        "<li class='list-item'>" +
        "<h3 class='name'>" + item.name + "</h3>" +
        "<p class='desc'>" + item.desc + "</p>" +
        "<p class='createdDate'>" + item.createdDate + "</p>" +
        "<a class ='img-link' href='" + item.link + "'<img src='" + item.img_src + "' class='img'>bild</a>" +
        "</li>" );
});

お役に立てれば。

于 2014-09-08T11:27:53.383 に答える