jquery, wie die Daten für den Zugriff in li

Question

Ich habe Liste wie diese

<ul id="list"> 
    <li url="book/love">Love</li> 
    <li url="book/cook">Food</li> 
    <li url="book/policy">Policy</li> 
    <li url="book/child">Child</li> 
    ............... 
    <li url="book/funny">Funny</li> 
</ul> 

Wie ich Daten in url dieser list bekommen kann?

mein Skript wie dieses

console.log($("#list li").attr("url")[1]); //It's should show **book/cook** but it's return undefined 

, wie ich diese Daten bekommen?

Answer 1

//console.log("console " +$('#list li:eq(2)').attr('url')); 
 

 
var ulli = $('#list li'); 
 

 

 
$.each(ulli, function(index, value) { 
 

 

 
    console.log($(this).attr('url')) //if you want to use data('url') your html should look like <li data-url="book/love">Love</li> 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="list"> 
 
    <li url="book/love">Love</li> 
 
    <li url="book/cook">Food</li> 
 
    <li url="book/policy">Policy</li> 
 
    <li url="book/child">Child</li> 
 
    ............... 
 
    <li url="book/funny">Funny</li> 
 
</ul>

wie dies zu tun.

Verwenden .each()

Beschreibung: Iterieren ein Objekt über jQuery, eine Funktion für jedes verglichene Element ausführt.

Answer 2

Mit :eq(indexNumber) können Sie auf Werte von Elementen per Index zugreifen. Andernfalls können Sie ein Array aller Werte von li erstellen und dann den Index verwenden, um auf den Wert zuzugreifen. Unten sind die zwei Lösungen.

Lösung 1: :eq()

console.log($("#list li:eq(1)").attr("url"); 

eq(1) steht für den Index ein, wie die Indizes verwenden beginnt bei 0, wird Ihr zweites Element 2 Index 1.

Lösung haben: ein Array erstellen der Werte von der Li und dann Zugriff auf sie

var liArray = []; 

    $.each('#list li',function(i,v){ 
     liArray.push($(this).attr('url')); 
    }); 

    console.log(liArray[0]); 
    ... 
    ... 
    ... 
    console.log(liArray[4]); 
    ... 

Answer 3

$('#list li').each(function() 
{ 
    console.log($(this).attr('url')); 
}); 

Arbeits Geige - https://jsfiddle.net/17vsnz13/