CODEWITHSUNDEEP
javascriptjqueryhtml
dominotrix
dominotrix

Reputation: 367

Use of dynamic variables

There are 3 li elements under the #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>

First, I want to hide the text with the URL inside the div. So I use this:

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

I use div:nth-child(7) because there are also other div elements inside the li which I didn't include here purely for clarity.

After hiding the div element, I want to make the whole li to be clickable and its link would be its relative url inside the div element. I use this:

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

Watch that I use ff.text(); which means the URL of the li will be the content of its div child.

This works perfectly, but I happen to have a total of 3 elements as you saw in the markup. So I created 2 other copies of the above script and changed their relative numbers as such:

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();

I also did the same thing to the other script (making li clickable). I will not show that script here for post-size reasons.

As you understand this is working fine for 3 lis. But what if the outcome is 50 lis?

Is there any way I can use a for or some kind of a loop that will dynamically change the li:nth-of-type(1) to li:nth-of-type(x) and by x meaning a dynamic variable like x++; ?

Upvotes: 1

Views: 76

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Rather than pulling out each ff element, use DOM traversal within the click() handler to find the related div to the clicked li, which contains the URL you want. This will allow you to have a single event handler applied to all li/div instances. Try this:

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

Also note that cc.css("cursor", "pointer"); and the hiding of the div elements should really be set in your CSS:

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

Here's a working example of it all together:

$("#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>

Upvotes: 2

Abhishek Gupta
Abhishek Gupta

Reputation: 109

try this::

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;
    });
}

Upvotes: 1

Related Questions