javascript - 使用jquery从ul列表中提取锚标记链接

Question

我想从我为在线课程设置的菜单中提取每个锚标记链接

ul id 是#sidebar

侧边栏中的 li 在正确的章节顺序中，所以我想找到用户所在的章节页面，然后抓取上一章和下一章，传递给每章底部的其他锚标签。

这就是我已经走了多远。

 for(var i = 0; i < $("#sidebar ul li").size(); i++) {

            console.log('chapter '+i+' = ',$("#sidebar ul li").get(i))

    }

这将返回每个 li 元素，那么我现在如何获取每个 li 返回的 a href 值？

我试着把 .a 放在最后，没有用。在谷歌上也找不到太多。

谢谢

Answer 1

Try this one: in fiddle here

var $sidelist = $("#sidebar ul li").size();

for (var i = 0; i < $sidelist; i++) {
    console.log('chapter ' + Math.floor(i + 1) + ' = ', $("#sidebar ul li").find('a').eq(i).attr('href'));
}

Output of above is:

//this is the output of for loop:
    chapter 1 = #chaper-1
    chapter 2 = #chaper-2
    chapter 3 = #chaper-3

or with $.each():

var $sidelist = $("#sidebar ul li");
$.each($sidelist, function(i, v){
   console.log('chapter '+Math.floor(i + 1)+' = ' + $(this).find('a').attr('href'));
});

Note:

You have to do this Math.floor(i + 1) to start the chapter with index 1 otherwise this will start at 0.

Answer 2

从性能的角度来看，在循环外只运行一次选择器很重要。

    var links =  $("#sidebar ul li a"); // equivalent to  $("#sidebar ul li").find('a')
    for(i = 0, length = links.length; i < length; ++i){
         console.log('chapter '+ i + ' = ' + $(links[i]).attr('href'));
    }

Answer 3

利用 FIND(),

for(var i = 0; i < $("#sidebar ul li").size(); i++) {
 console.log('chapter'+ i +' = ',$("#sidebar ul li").find('a').eq(i).attr('href'));
}

Answer 4

嘿伙计们，感谢您的及时答复，

我最终得到了这个做我想做的事，有点摆弄。

这就是我想出的...

$(document).ready(function(){
var previouschap;
var nextchap;
var chapter ="<?php echo (isset($_GET['chapter'])) ? $_GET['chapter'] : 'No Chapter';  ?>";

for(var i = 0; i < $("#sidebar li").size(); i++) {
    liresult = $($("#sidebar li a").get(i)).attr('href');

    if(liresult == './index.php?chapter='+chapter)
                    {
                        previouschap = $($("#sidebar li a").get(i-1)).attr('href');
                        nextchap = $($("#sidebar li a").get(i+1)).attr('href');

                        $('#previous-chapter').attr('href', previouschap);
                        $('#next-chapter').attr('href', nextchap);
                        break;
                    }

    }
});