Question

所以我有一段代码在列表中显示奖牌（img's），我的目标是，一旦5 li已经显示，此后再切断。（如果可能的话，还会显示三个省略号...，将用户重定向到可以看到所有这些奖牌的位置。）所有帮助都表示赞赏！

<div id="medals">
    <h3 style="text-decoration:underline;">User medals:</h3>
    <ul>
        <script>
        document.getElementById('medals').getElementsByTagName('li').length >= 5 {  } // my first guess at starting something like my question off? 
        </script>
        <li>
            <img src="images/medals/startup.png" title="<?php echo $profile_data['display_name'];  ?> created a profile!" alt="a medal should be here?">
        </li> // a medal that all users get
        <?php echo base64_decode($profile_data['medals'] // this code displays all medal <li>'s from MySql database); ?>
    </ul>
</div>

Answer 1

你可以使用一些带偏移的strpos（）来获得最后</li>的位置。

然后使用该位置获取所需的子字符串。

<div id="medals">
    <h3 style="text-decoration:underline;">User medals:</h3>
    <ul>
        <li>
            <img src="images/medals/startup.png" title="<?php echo $profile_data['display_name'];  ?> created a profile!" alt="a medal should be here?">
        </li> // a medal that all users get
        <?php $medalslist = base64_decode($profile_data['medals']; // this code displays all medal <li>'s from MySql database);
              $pos = strpos($medalslist, '</li>', strpos($medalslist, '</li>', strpos($medalslist, '</li>', strpos($medalslist, '</li>', strpos($medalslist, '</li>')+5)+5)+5)+5);
              echo substr($medalslist, 0, $pos+5); // get position of last </li>
              echo '<li><a href="/USERNAME/MEDALS">...</a></li>';
        ?>
    </ul>
</div>

当然，您不必使用php来回显链接到奖牌页面的最后一个li元素。但我认为你可能会使用php来获取可能是url一部分的用户名，所以我就这样说了。

如果您希望能够轻松更改显示的奖牌数量，可以使用for循环：

<div id="medals">
    <h3 style="text-decoration:underline;">User medals:</h3>
    <ul>
        <li>
            <img src="images/medals/startup.png" title="<?php echo $profile_data['display_name'];  ?> created a profile!" alt="a medal should be here?">
        </li> // a medal that all users get
        <?php $medalslist = base64_decode($profile_data['medals']; // this code displays all medal <li>'s from MySql database);
              $pos = 0; // set offset to zero
              for($i=0;$i<5;$i++) { // 5 is the number of medals to display
                 $pos = strpos($medalslist, '</li>', $pos+5); // set offset to right after where the last "</li>" was found - +5 because "</li>" has five characters
              };
              echo substr($medalslist, 0, ($pos > 0 ? $pos+5 : $pos)); // get position of last </li> you want to display
              echo '<li><a href="/USERNAME/MEDALS">...</a></li>';
        ?>
    </ul>
</div>

Answer 2

这是一个简短的快速示例，可以帮助您入门..（注意，绝不是准备就绪）： http://jsfiddle.net/9hH2V/21/

HTML：

<ul id="list">
    <li>anac</li>
    <li>anac</li>
    <li>anac</li>
    <li>anac</li>
    <li>anac</li>
    <li>anac</li>
    <li>anac</li>
</ul>

纯粹的JS：

function showAll(){
    var ellipsis = document.getElementsByTagName("a")[0]; // remove ellipsis
    ellipsis.parentNode.removeChild(ellipsis);
    for(i = 0; i <= list.length ; i++){ // display hidden list elements
         document.getElementsByTagName("li")[i].style.display="block";
    }
}

function showSome(n, list){// shows only first n out of list elements

    var i, tmp,
        a = document.createElement("a");

    a.href = "#";
    a.onclick = showAll;
    a.text = "...";

    if (list.length > n){
        for(i = 0; i <= list.length ; i++){
            if (i > n){
                tmp = document.getElementsByTagName("li")[i]
                if(tmp)
                    tmp.style.display="none";       
            }            
        }
       document.getElementById("list").appendChild(a);       
    }    
}
var list = document.getElementsByTagName("li");
showSome(3, list);

5 li之后再防止显示并放置`...`

2 个答案: