CODEWITHSUNDEEP
jquery
Pure Rhymer Organization
Pure Rhymer Organization

Reputation: 536

selecting <li> with :first jquery

I have this HTML which every 5 second the class display will pass in next <li>

<ul class="listing">
  <li class="display"><img src="first"></li>
  <li class=""><img src="second"></li>
  <li class=""><img src="third"></li>
</ul>

<div class="put"></div>

and have this SCRIPT

var q = jQuery(".listing").children(".display");
var w = jQuery(q).prev("li").find("img").attr("src");
var e = jQuery(q).first();
var r = jQuery(".listing > li").last().find("img").attr("src");

if(e){
  jQuery(".put").css({"background-image":"url(" + r + ")"});
}else{
  jQuery(".put").css({"background-image":"url(" + w + ")"});
}

I want to get the PREVIOUS image src of <li> that has the class display and put it in <div> and make it a background-image

but if the first <li> has the class display I want to display the last image.

ps. im sorry i forgot to put the previous

Upvotes: 0

Views: 85

Answers (5)

Ikhlak S.
Ikhlak S.

Reputation: 9024

You first get the element with the display class and if it has then get the image using html() to replace the current image and then you can use setInterval() to repeat the code after every 5 seconds:

var e;
setInterval(function(){
  e = $('.listing').find('.display');
  $('.put').html(e.html());
  //change elememt class
  console.log(e.next('li').length)
  if(e.next('li').length){
   e.removeClass('display').next('li').addClass('display');
  }else{
   e.removeClass('display');
   e = $('.listing').children().first('li').addClass('display');
  }
}, 5000)

JSFiddle

Upvotes: 1

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

Try this snippet.

var isFirst = $('.listing li').first().hasClass('display');
var src;
if(isFirst)
{
  src = $('.listing li').last().find('img').attr('src');
}
else
{
  src = $('.listing li:eq('+parseInt($('.listing li.display').index()-1)+')').find('img').attr('src')
}
console.log("THIS SRC WILL BE SET   " + src);
$(".put").css({"background-image":"url(" + src + ")"});

console.log("NOW DIV HAS NEW SRC   " + $('.put').css('background-image'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listing">
  <li class="display"><img src="https://placehold.it/350x50"></li>
  <li class=""><img src="https://placehold.it/350x75"></li>
  <li class=""><img src="https://placehold.it/350x100"></li>
</ul>

<div class="put">DIV with Background Image</div>

Upvotes: 1

Ish
Ish

Reputation: 2105

check the fiddle: https://jsfiddle.net/bugc6w3y/ What you need to do is check the index o f both the elements:

var q = jQuery(".listing").children(".display");
var w = jQuery(q).prev("li").find("img").attr("src");
var e = jQuery('li').first();
var r = jQuery(".listing > li").last().find("img").attr("src");

var q1 = jQuery( "li" ).index( q ); 
var e1 = jQuery( "li" ).index( e ); 

if(e1==q1) {
  jQuery(".put").css({"background-image":"url(" + r + ")"});
}else{
  jQuery(".put").css({"background-image":"url(" + w + ")"});
}

Upvotes: 1

ashok93
ashok93

Reputation: 103

In your solution, please note that the variable w is undefined as there is no previous element in the list. the variable e is same as variable q. Could you please explain in more detail on what you are trying to achieve. If it is about hiding/showing images, I would recommend the solution like what Nitya Kumar suggested.

Upvotes: 1

Nitya Kumar
Nitya Kumar

Reputation: 968

$('.listing li.display').each(function(this){
this.hide();
});

$('.listing li.display').first().show();

Upvotes: 2

Related Questions