jQuery Zugangsdaten-url Element und prüfen Sie mit URL-Parameter

Question

Zunächst einmal; Es tut mir leid, wenn meine quesiton irrelevant ist, weil ich Neuling bin auf jQuery

ich ein Menü in meiner Website. Hier ist HTML;

<ul class="page-sidebar-menu"> 
    <li data-link="index.php"><a href="index.php">Home</a></li> 
    <li data-link="logout.php"><a href="logout.php">Logout</a></li> 
</ul> 

Ich nehme URL-Pfad mit li data-link zu vergleichen active Klasse li

hinzufügen, aber leider nicht definiert es zurück.

Hier ist mein Javascript/jQuery;

var pathname = window.location.pathname; // Returns path only 
var encPath = encodeURIComponent(pathname); // Encoded URL 
var splPath = encPath.split('%2F'); 
var cleanUrl = splPath.pop(); // Clean Url 
var dataUrl = $('ul.page-sidebar-menu > li').attr('data-link'); 
$(dataUrl).each(function(i) { 
    if(dataUrl === cleanUrl) { 
     dataUrl.addClass('active'); 
    } 
}); 

Also, was ist falsch mit meinem Code? Wie kann ich es reparieren? Jede Hilfe sehr geschätzt.

PS: Sorry für schlechtes Englisch.

Answer 1

Verwendung $().data('link') den Wert von data-link Attribut abzurufen:

$('ul.page-sidebar-menu > li') 
    .filter((index, item) => $(item).data('link') === cleanUrl) 
    .addClass('active') 

Answer 2

Sie müssen $('ul.page-sidebar-menu > li') laufen und testen Sie die einzelnen Elemente data-url Attribut.

$('ul.page-sidebar-menu > li').each(function(i) { 
    if($(this).attr('data-link') === cleanUrl) { 
     $(this).addClass('active'); 
    } 
}); 

Sie auch Element.dataset Eigenschaft verwenden, können alle benutzerdefinierten Daten (data-*) Satz wie this.dataset.link

auf Elementattribute zugreifen können

---

-Code als

$('ul.page-sidebar-menu > li').filter(function(i) { 
    return this.dataset.link === cleanUrl;    
}).addClass('active'); 

Answer 3

Sie each auf verwenden können verbessert werden li zu data-link von jedem li erhalten und mitübereinstimmen

var pathname = window.location.pathname; // Returns path only 
var encPath = encodeURIComponent(pathname); // Encoded URL 
var splPath = encPath.split('%2F'); 
var cleanUrl = splPath.pop(); // Clean Url 
$('ul.page-sidebar-menu > li').each(function(){ 
if ($(this).attr("data-link") === cleanUrl) { 
    dataUrl.addClass('active'); 
    } 
}); 

Answer 4

Also, was mit meinem Code falsch? Wie kann ich es reparieren? Jede Hilfe sehr geschätzt.

Problem: ist mit dieser Codezeile $('ul.page-sidebar-menu > li').attr('data-link'); Und später Sie Schleife es versuchen. Das Problem ist, obwohl diese Syntax $('ul.page-sidebar-menu > li') Sie Gruppe von aufeinander abgestimmten Elemente zurück, sobald Sie .attr darauf verwenden wird es Sie nur den Wert des ersten Elements im Array zurück. Daher enden Sie mit nur einer Iteration.

Lösung: Wie bereits andere Antworten angegeben haben, Ihre $('ul.page-sidebar-menu > li') Schleife und dann mit dem $(this).data('link')

$('ul.page-sidebar-menu > li').each(function(i) { 
    if($(this).data('link') === cleanUrl) { 
     $(this).addClass('active'); 
     return false; // break loop as we found the link. 
    } 
});