Selector lt() does not work

Asked

Viewed 44 times

2

In my jQuery selector experiments I came across something that I don’t know is my mistake or is a natural limitation of jQuery. I have 10 Ivs with classes .dado. Each, when clicked, changes the event onclick of another (single), which has the id #download. Only the first 5 should change the onclick of the div #download. I tried to use the lt() selector for this, but saw that it does not roll. All 10 Divs receive the function.

As I did:

$(document).ready(function(){
  $(".dado:lt(5)").click(function(){
    $("#download").attr("onclick", "href('http://meulink.com')");
  });
});

He really can’t do it, I screwed something up or he’d have an alternative solution?

jquery selectors

  • There is nothing wrong with your script. Review the HTML markup.

2 answers

2


As you can see in the example, the method :it’s() works perfectly for the purpose it wants to apply:

$(function() {
  $(".dado:lt(5)").on("click", function() {
    $("#download").prop("href", "http://meulink.com");
    console.log($(this).text()+" - "+$("#download").prop("href"));
  });
});
.dado {
  cursor: pointer;
  padding: 5px;
  margin-bottom: 5px;
  background-color: #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dado">DIV 01</div>
<div class="dado">DIV 02</div>
<div class="dado">DIV 03</div>
<div class="dado">DIV 04</div>
<div class="dado">DIV 05</div>
<div class="dado">DIV 06</div>
<div class="dado">DIV 07</div>
<div class="dado">DIV 08</div>
<div class="dado">DIV 09</div>
<div class="dado">DIV 10</div>
<a href="" id="download">DIV ÚNICA</a>

  • Ah, now I understand my mistake! I was confused to see that clicking on div 6 ahead the single div was still the same link as 5, so I thought it was because they also changed it, but it’s because they have nothing to change to the link change...

  • That’s right, exactly. From the sixth clicks do nothing else.

  • One question I have is whether it is possible to take "middle" Ivs, example, I want from 3 to 6. There is a selector for this?

  • Face to tell you the truth, I don’t know any method or selector that can catch elements with intervals, I think in this case I would have to do a dump on the same elements.

1

Use the jQuery method lt() combined with the method gt().

In the following example the function will be executed for clicks on div 03 to 06 inclusive (Javascript count starts at ZERO).

It is important that the methods are applied in the order :lt():gt(). If you reverse the order to gt(1):lt(6) function will be executed for clicks on div 03 to 08 inclusive.

This is not a "bug"#from jQuery. You know why? 

$(".dado:lt(6):gt(1)" ).click(function(){
  //$("#download").attr("onclick", "href('http://meulink.com')");
  console.log($(this).html());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>		
<div class="dado">DIV 01</div>
<div class="dado">DIV 02</div>
<div class="dado">DIV 03</div>
<div class="dado">DIV 04</div>
<div class="dado">DIV 05</div>
<div class="dado">DIV 06</div>
<div class="dado">DIV 07</div>
<div class="dado">DIV 08</div>
<div class="dado">DIV 09</div>
<div class="dado">DIV 10</div>
<a  onclick="" id="download">Link</a>

Browser other questions tagged jquery selectors

You are not signed in. Login or sign up in order to post.