I have 3 li and the content is repeated after I execute an .insertAfter()
<ul class="course-list">
<li>
<div class="course-image">
<img src="url_of_photo" />
</div>
<div class="course-content">
<p class="post-title"><a title="" href="/courses/level-2-certificate-in-english/"> Level 2 Certificate In English</a>
</p>
<p class="post-meta post-meta-level">Level 2</p>
<p class="post-meta post-meta-boxcolor">light blue</p>
</div>
</li>
</ul>
I want to transfer class="course-image" below class="course-content"
When I execute:
$('.course-list .course-image').insertAfter('.course-list .course-content');
The result becomes like this:
<ul class="course-list">
<li>
<div class="course-content">
<p class="post-title"><a title="Level 2 Certificate In English For Business" href="/courses/level-2-certificate-in-english/"> Level 2 Certificate In English</a>
</p>
<p class="post-meta post-meta-level">Level 2</p>
<p class="post-meta post-meta-boxcolor">light blue</p>
</div>
<div class="course-image">
<img src="url_of_photo" />
</div>
<div class="course-image">
<img src="url_of_photo" />
</div>
</li>
</ul>
It happens to every li of that ul.
What is the proper query to move class="course-image" for each list without having to repeat on evey li?
Thanks!
You need to iterate and move
$('.course-list .course-image').each(function(){
$(this).insertAfter($(this).next())
});
Related
Below is my html where i want to target the element id first when clicking on the list element demo similarly targeting the element id second when clicking on the list element demo2 and so on . is it doable by using javascript mouseover function . mouse out function should not display any text . I need my text display only when mouse is hovered on the list item
<div class="section-body">
<div class="slider-details">
<div class="slider-controls">
<ul>
<li id="demo">
<strong>test1</strong>
</li>
<li id="demo2">
<strong>test2</strong>
</li>
<li id="demo3">
<strong>test3</strong>
</li>
<li id="demo4">
<strong>test4</strong>
</li>
</ul>
</div>
<div class="slider-clip">
<div class="slider-slides">
<div class="slider-slide">
<h4 class="slider-slide-title">
test1
</h4>
<div class="slider-slide-body">
<p id="first">this is para one</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test2
</h4>
<div class="slider-slide-body">
<p id="second">this is para2</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test3
</h4>
<div class="slider-slide-body">
<p id="third">this is para3</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test4
</h4>
<div class="slider-slide-body">
<p id="fourth">this is para4</p>
</div>
</div>
</div>
</div>
</div>
</div>
You can querySelectorAll to get all the required li and p elements. Then you need to iteerate over li_arr and add mouseover event listener to each li. Since their (li and p elements) numbers are equal, you can directly use the index to target the p.
once: true will make sure, event listener doesn't fire again, after firing for 1st time. Without any mouseout, the changes made to p will be retained.
let li_arr = document.querySelectorAll(".slider-controls ul li")
let p_arr = document.querySelectorAll(".slider-slide-body p");
li_arr.forEach((li, index) => {
li.addEventListener("mouseover", () => {
p_arr[index].style.display = "block"; //Add whatever style you want here
}, {
once: true
})
});
.slider-slide-body p {
display: none;
}
<div class="section-body">
<div class="slider-details">
<div class="slider-controls">
<ul>
<li id="demo">
<strong>test1</strong>
</li>
<li id="demo2">
<strong>test2</strong>
</li>
<li id="demo3">
<strong>test3</strong>
</li>
<li id="demo4">
<strong>test4</strong>
</li>
</ul>
</div>
<div class="slider-clip">
<div class="slider-slides">
<div class="slider-slide">
<h4 class="slider-slide-title">
test1
</h4>
<div class="slider-slide-body">
<p id="first">this is para one</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test2
</h4>
<div class="slider-slide-body">
<p id="second">this is para2</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test3
</h4>
<div class="slider-slide-body">
<p id="third">this is para3</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test4
</h4>
<div class="slider-slide-body">
<p id="fourth">this is para4</p>
</div>
</div>
</div>
</div>
</div>
</div>
I added data-effects to your li elements. it has the id of the object you wont to effect something.
So getting this id you can apply what you wanto to this object.
i used Jquery in this example.
Try this Running the code and let me know.
$('li').on('mouseover',function(){
// some logs for better understand...
//console.log($(this).attr("id"));
//console.log($(this).data("effects"));
//getting the id of the object to effect, from the html object where the mouse is on over
eid = $(this).data("effects");
//do something to object , for example change the color...
$(eid).css("color","red");
});
$('li').on('mouseout',function(){
eid = $(this).data("effects");
//do something to object , for example restore the orig color...
$(eid).css("color","black");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-body">
<div class="slider-details">
<div class="slider-controls">
<ul>
<li id="demo" data-effects="#first">
<strong>test1</strong>
</li>
<li id="demo2" data-effects="#second">
<strong>test2</strong>
</li>
<li id="demo3" data-effects="#third">
<strong>test3</strong>
</li>
<li id="demo4" data-effects="#fourth">
<strong>test4</strong>
</li>
</ul>
</div>
<div class="slider-clip">
<div class="slider-slides">
<div class="slider-slide">
<h4 class="slider-slide-title">
test1
</h4>
<div class="slider-slide-body">
<p id="first">this is para one</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test2
</h4>
<div class="slider-slide-body">
<p id="second">this is para2</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test3
</h4>
<div class="slider-slide-body">
<p id="third">this is para3</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test4
</h4>
<div class="slider-slide-body">
<p id="fourth">this is para4</p>
</div>
</div>
</div>
</div>
</div>
</div>
I'm using this library https://github.com/makotot/react-scrollspy to get the scroll to div effect.However after following the documentation ,I don't seem to get it working.Code :
<RewardContainer>
<div className="pageWrapper">
<div className="rewardInfoWrapper">
<div className="tabsContainer">
<div>
<Scrollspy
items={[
"section-1",
"section-2",
"section-3"
]}
currentClassName="is-current"
>
<li>
<a
href="#section-1"
className="c-side-nav__link"
>
Streak
</a>
</li>
<li>
<a
href="#section-2"
className="c-side-nav__link"
>
Gems
</a>
</li>
<li>
<a
href="#section-3"
className="c-side-nav__link"
>
Xp Points
</a>
</li>
</Scrollspy>
</div>
</div>
<div className="columnContainer">
<div className="tabInfo">
<div>
<div id="section-1">
<p>
This is Section 1
</p>
</div>
<div id="section-2">
<p>
This is Section 2
</p>
</div>
<div id="section-3">
<p>
This is Section 3
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</RewardContainer>
The issue is ,my a href="#id" tag reloads the browser and treats id as a route instead of scrolling to that div's id.For instance,clicking on the third li element reloads the browser with http://localhost:7000/#section-3 in the url.
does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe
Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>
I have page with more icons and when you click on the icon you can see div where is some content. I would like to know if it is possible to write it somehow more simple then I do. I have 10 icons and I want to have always only one Div opened, so jQuery is quite long and 10 times almost the same.
This is how my jQuery looks like for 1 icon. It is almost the same for rest of them
$(".icon_pl").click(function(){
$("div#show").hide("slow");
$("div#rockz").hide("slow");
$("div#join").hide("slow");
$("div#wedding").hide("slow");
$("div#pl").toggle("slow");
if ($(this).hasClass('icon_active'))
{
$(this).removeClass('icon_active')
} else {
$('.icon_active').removeClass('icon_active');
$(this).toggleClass("icon_active");}
return false;
});
Icons
<div class="iconteiner">
<ul>
<li><span class="icon_pl"></span><h3>Private Lesson</h3></li>
<li><span class="icon_join"></span><h3>Join Us</h3></li>
<li><span class="icon_wedding"></span><h3>Wedding Dance</h3></li>
<li><span class="icon_rockz"></span><h3>ROKCZ Couture</h3></li>
<li><span class="icon_show"></span><h3>Show Dance</h3></li>
</ul>
</div>
Divs with content
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
It works, but I would like to know if it is possible to make it somehow more simple and to write down every id (each div is different with different content, this is why id and not class)
Thank you
How about this. Note the selector is the LI since the span has no content
Actually Can you change the class on the span to ID or DATA attribute so one can always use
$span.attr("id").split("_")[1]; or $span.data("div2show");
$(function() {
$(".iconteiner li").on("click", function() {
$(".content > div").hide("slow");
var $span = $(this).find("span");
var id = $span.attr("class").split("_")[1];
$("#" + id).show("slow");
$span.toggleClass('icon_active');
});
});
$(function() {
$(".iconteiner li").on("click", function() {
$(".content > div").hide("slow");
var $span = $(this).find("span");
var id = $span.attr("class").split("_")[1];
$("#" + id).show("slow");
$span.toggleClass('icon_active');
});
});
.content div {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="iconteiner">
<ul>
<li><span class="icon_pl"></span>
<h3>Private Lesson</h3>
</li>
<li><span class="icon_join"></span>
<h3>Join Us</h3>
</li>
<li><span class="icon_wedding"></span>
<h3>Wedding Dance</h3>
</li>
<li><span class="icon_rockz"></span>
<h3>ROKCZ Couture</h3>
</li>
<li><span class="icon_show"></span>
<h3>Show Dance</h3>
</li>
</ul>
</div>
Divs with content
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
you could put the name of the relating div in either a rel attribute or in a data prefixed attribute
then in JS/Jquery hide all of the divs, and only show the one you need - that relates to the new attribute.
something along the lines of
$(".icon").click(function(){
$(".maindivs div").hide();
var toggleDiv = $(this).attr("data-divToToggle");
$("#"+toggleDiv ).slideDown("slow");
if ($(this).hasClass('icon_active'))
{
$(this).removeClass('icon_active')
}
else
{
$('.icon_active').removeClass('icon_active');
$(this).toggleClass("icon_active");
}
return false;
});
Following script would do what you expect.
$(function () {
//hide all div on load except first one
$('div.content div:not(#pl)').hide();
$("li.icon").click(function () {
var div = $(this).data('div');
$('div.content div.icon_active')
.removeClass('icon_active')
.hide('slow');
$('div.content div#' + div)
.addClass('icon_active')
.show('slow');
return false;
});
});
Your HTML would look something liek this.
<div class="iconteiner">
<ul>
<li class='icon' data-div='pl'><span class="icon_pl"></span>
<h3>Private Lesson</h3>
</li>
<li class='icon' data-div='join'><span class="icon_join"></span>
<h3>Join Us</h3>
</li>
<li class='icon' data-div='wedding'><span class="icon_wedding"></span>
<h3>Wedding Dance</h3>
</li>
<li class='icon' data-div='rockz'><span class="icon_rockz"></span>
<h3>ROKCZ Couture</h3>
</li>
<li class='icon' data-div='show'><span class="icon_show"></span>
<h3>Show Dance</h3>
</li>
</ul>
</div>
<div class="content">
<div id="pl" class="icon_active">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
Here is WORKING JS FIDDLE
Unless the elements are related hierarchically, I'd add a data attribute to be able to easily find the correct content.
$(function() {
$('li[data-content]').click(function(){
$('li[data-content] span').removeClass('icon-active');
$(this).find('span').addClass('icon-active');
$('.content div').hide();
$('.content div[id='+$(this).data('content')+']').show();
});
});
.content div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iconteiner">
<ul>
<li data-content='pl'><span class="icon_pl"></span><h3>Private Lesson</h3></li>
<li data-content='join'><span class="icon_join"></span><h3>Join Us</h3></li>
<li data-content='wedding'><span class="icon_wedding"></span><h3>Wedding Dance</h3></li>
<li data-content='rockz'><span class="icon_rockz"></span><h3>ROKCZ Couture</h3></li>
<li data-content='show'><span class="icon_show"></span><h3>Show Dance</h3></li>
</ul>
</div>
<div class="content">
<div id="pl">
<h2>Headlin 1</h2>
<p class="product_description"></p>
</div>
<div id="join">
<h2>Headlin 2</h2>
<p class="product_description"></p>
</div>
<div id="wedding">
<h2>Headline 3</h2>
<p class="product_description"></p>
</div>
<div id="rockz">
<h2>Headline 4</h2>
<p class="product_description"></p>
</div>
<div id="show">
<h2>Headline 5</h2>
<p class="product_description"></p>
</div>
</div>
I need a small help from all of you .
I have a list in which multiple div is present. Each list has 3 divs inside it where the first div of every list is an image. I need to fade in fade out the first div of each list.
Below is my code.
<input type="radio" id="control1" name="controls" checked="checked"/>
<label for="control1"></label>
<input type="radio" id="control2" name="controls"/>
<label for="control2"></label>
<input type="radio" id="control3" name="controls"/>
<label for="control3"></label>
<input type="radio" id="control4" name="controls"/>
<label for="control4"></label>
<input type="radio" id="control5" name="controls"/>
<label for="control5"></label>
<div class="sliderinner">
<ul>
<li>
<div id ="image1">
<div class="description">
<div class="description-text">
<h2>Slideshow Title 3</h2>
</div>
</div>
</div>
</li>
<li >
<div id ="image2">
<div class="description">
<div class="description-text">
<h2>Laddak</h2>
</div>
</div>
</div>
</li>
<li>
<div id ="image3">
<div class="description">
<div class="description-text">
<h2>Hangouts</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image4">
<div class="description">
<div class="description-text">
<h2>Birds</h2>
</div>
</div>
</div>
</li>
<li >
<div id="image5">
<div class="description">
<div class="description-text">
<h2>Taj Mahal</h2>
</div>
</div>
</div>
</li>
</ul>
</div>
</div><!--slider-->
<edit>
animation + delay increased for each boxes : http://codepen.io/gc-nomade/pen/qAjod/
</edit>
here is an example :
div {
animation: fdio 1s infinite;
background:gray;
}
#keyframes fdio {
50% {opacity:0;}
}
for : <div> text </div>
DEMO
do not forget to add vendor-prefix or use a script to add them automaticly
<ul>
<li>
<div id="image1" class="abc">
<div class="description">
<div class="description-text">
<h2>Slideshow Title 3</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image2" class="abc">
<div class="description">
<div class="description-text">
<h2>Laddak</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image3" class="abc">
<div class="description">
<div class="description-text">
<h2>Hangouts</h2>
</div>
</div>
</div>
</li>
</ul>
setInterval(function(){ $(".abc").fadeToggle("slow");},4000);
http://jsfiddle.net/x73z9/2/
you can use like this :
li div:first-child {
//put css code here
}