Verwendung von dynamischen Variablen

Question

Es gibt 3 li Elemente unter dem #myc Element.

<div id="myc"> 
    <li> 
    <div>http://www.example.com/?id=1</div> 
    </li> 
    <li> 
    <div>http://www.example.com/?id=2</div> 
    </li> 
    <li> 
    <div>http://www.example.com/?id=3</div> 
    </li> 
</div> 

Zuerst möchte ich in der div den Text mit der URL verstecken. Also ich benutze diese:

ff = jQuery("#myc li:nth-of-type(1) div:nth-child(7)"); // the url 
ff.hide(); 

Ich benutze div:nth-child(7) weil es auch andere div Elemente innerhalb des li sind, die ich hier nicht rein aus Gründen der Übersichtlichkeit haben sind.

Nachdem ich das div Element versteckt habe, möchte ich das ganze li klickbar machen und sein Link wäre seine relative URL innerhalb des div Elements. Ich benutze diese:

cc = jQuery("#myc li:nth-of-type(1)"); // the li 
cc.css("cursor", "pointer"); 
cc.click(function(){ 
    window.location.href = ff.text(); 
    return false; 
}); 

Uhr, die ich ff.text(); verwenden, die die URL der li bedeutet, dass der Inhalt seiner div Kind sein.

Das funktioniert perfekt, aber ich habe zufällig insgesamt 3 Elemente, wie Sie im Markup gesehen haben. Also habe ich 2 weitere Kopien des obigen Skripts und änderte ihre relativen Zahlen als solche:

ff1 = jQuery("#myc li:nth-of-type(1) div:nth-child(7)"); // the url 
ff1.hide(); 

ff2 = jQuery("#myc li:nth-of-type(2) div:nth-child(7)"); // the url 
ff2.hide(); 

ff3 = jQuery("#myc li:nth-of-type(3) div:nth-child(7)"); // the url 
ff3.hide(); 

ich auch das gleiche mit dem anderen Skript hat (was li klickbare). Ich werde dieses Skript hier nicht aus Gründen der Größe nach unten zeigen.

Wie Sie verstehen, funktioniert das gut für 3 li s. Aber was, wenn das Ergebnis 50 li s ist?

Gibt es eine Möglichkeit, ein for oder irgendeine Art einer Schleife verwenden können, die dynamisch die li:nth-of-type(1) zu li:nth-of-type(x) ändern wird und durch x eine dynamische Variable wie x bedeutet ++; ?

Answer 1

Anstatt Herausziehen jedes ff Element verwenden DOM Traversal im click() Handler die im Zusammenhang div auf die geklickt li zu finden, die die URL enthält, die Sie wollen. Auf diese Weise können Sie einen einzelnen Ereignishandler auf alle Instanzen anwenden, die auf alle li/div Instanzen angewendet werden. Versuchen Sie folgendes:

$("#myc li").click(function(e) { 
    e.preventDefault(); 
    var url = $(this).find('div:nth-child(7)').text(); 
    window.location.href = url; 
}); 

Beachten Sie auch, dass cc.css("cursor", "pointer"); und das Versteck der div Elemente wirklich in Ihrem CSS festgelegt werden sollte:

#myc li { cursor: pointer; } 
#myc li div:nth-child(7) { display: none; } 

Hier ist ein funktionierendes Beispiel für sie alle zusammen:

$("#myc li").click(function(e) { 
 
    e.preventDefault(); 
 
    var url = $(this).find('div:nth-child(7)').text(); 
 
    //window.location.href = url; 
 
    console.log('redirecting to: ' + url); 
 
});

#myc li { cursor: pointer; } 
 
#myc li div:nth-child(7) { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myc"> 
 
    <li> 
 
    <span>Padding</span> <span>out</span> <span>some</span> <span>words</span> <span>for</span> <span>the index...</span> 
 
    <div>http://www.example.com/?id=1</div> 
 
    </li> 
 
    <li> 
 
    <span>Padding</span> <span>out</span> <span>some</span> <span>words</span> <span>for</span> <span>the index...</span> 
 
    <div>http://www.example.com/?id=2</div> 
 
    </li> 
 
    <li> 
 
    <span>Padding</span> <span>out</span> <span>some</span> <span>words</span> <span>for</span> <span>the index...</span> 
 
    <div>http://www.example.com/?id=3</div> 
 
    </li> 
 
</div>

Answer 2

dies versuchen ::

var length = jQuery("#myc li").length; 
for (i = 0; i<length; i++) { 
    var selector = "#myc li:nth-of-type("+i+") div:nth-child(7)"; 
    jQuery(selector).hide(); 
    var cc = "#myc li:nth-of-type("+i+")"; 
    jQuery(cc).css("cursor", "pointer"); 
    jQuery(cc).click(function(){ 
    window.location.href = jQuery(selector).text(); 
     return false; 
    }); 
}