Develop Reference

jquery clone a link (once per div)

I have a set of divs, and need to clone the link from the top and insert into the last div (mobile-link). It is either cloning the links from all of the divs, and then inserting all of them at once, or if I use :eq(0), it's putting the first link into all of the divs.
<div class="course">Accounting</div>
<div class="start-date">1-1-2017</div>
<div class="credits">4</div>
<div class="location">Online</div>
<div class="mobile-link"></div>
<div class="course">Business</div>
<div class="start-date">1-1-2017</div>
<div class="credits">3</div>
<div class="location">Online/Campus</div>
<div class="mobile-link"></div>
<script>
$(".course a:eq(0)").clone().appendTo(".mobile-link");
</script>
What do I need to change to make this work properly?

You need to process each anchor separately:
$(".course").each(function() {
var myLink = $(this).find('a').clone();
$(this).nextAll('.mobile-link').first().append(myLink);
});
Demo fiddle

Append method can take a function as argument, and here it is appending to the each .mobile-link first <a> from his previous .course div
$(".mobile-link").append(function(){
return $(this).prevAll('.course:first').find('a:first').clone();
});
Check the below snippet
$(".mobile-link").append(function(i) {
return $(this).prevAll('.course:first').find('a:first').clone();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="course">Accounting
</div>
<div class="start-date">1-1-2017</div>
<div class="credits">4</div>
<div class="location">Online</div>
<div class="mobile-link"></div>
<div class="course">Business
</div>
<div class="start-date">1-1-2017</div>
<div class="credits">3</div>
<div class="location">Online/Campus</div>
<div class="mobile-link"></div>

I beleive that you should use last (If I understood question correctly):
var lastDiv = $(".mobile-link").last();
$(".course a:eq(0)").clone().appendTo(lastDiv);
Here is jsfiddle: fiddle

Hide parent div if child div is missing

Is it possible at all to hide a parent div if there is a child div missing?
In the example below I would like to hide the parent div of "#live-sessions" if some of the divs are missing such as .views-content and .views-row.
This is what it looks like when the divs are there:
<div id="live-sessions">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h3 class="session-title">Sessions Live Now</h3>
<div class="col-sm-9">
<div class-"view-display-id-live_sessions">
<div class="views-content">
<div class="views-row">
</div>
<div class="views-row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what it looks like when the divs are missing:
<div id="live-sessions">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h3 class="session-title">Sessions Live Now</h3>
<div class="col-sm-9">
<div class-"view-display-id-live_sessions">
</div>
</div>
</div>
</div>
</div>
I tried using the :empty selector with the parent method, but my child div contains some blank lines so it doesn't think it's empty. Also I would like to hide the parent of the parent of the empty div.
$(".view-display-id-live_sessions:empty").parent().hide();

You have a typo in your html:
class-"view-display-id-live_sessions"
should be
class="view-display-id-live_sessions"
you can try the following jQuery code:
if ($(".view-display-id-live_sessions").html().trim() == '') {
$(".view-display-id-live_sessions").parent().parent().hide();
}
jqVersion demo

Use jQuery has() in a negative if test - http://api.jquery.com/has/
if(!$('#parent').has('.child')){
$('#parent').hide();
}

There isn't a one-line-query for this. Following code would do the trick:
$('#live-sessions .row').each(function(idx, row) {
if ($(row).find('.views-content').length == 0) {
$(row).hide();
}
});

If you want to keep using jQuery, you could instead do:
if ( ! $(".view-display-id-live_sessions").children().length ) { /* your logic */ }
Note that there's a syntax error in your code:
<div class-"view-display-id-live_sessions">
Should be
<div class="view-display-id-live_sessions">

If you understand your question:
First you need to check the number of .views-row divs. If the length is zero hide the parent div.
Ex:
if ($('.views-row').length < 1)
$('#live-sessions').hide();
Good Luck.

You need to trim the blank spaces, correct a typo and test for the text within the div -
class="view-display-id-live_sessions" // note the equals sign after class
The code to do the hiding (EDIT re-read problem again):
var liveSessionsText = $.trim( $('.view-display-id-live_sessions').text() );
if(0 == liveSessionsText.length) {
$('.view-display-id-live_sessions').closest('.row').hide();
}
The div with class="row" is the parent of the parent of view-display-id-live_sessions.

Getting class contains in a very simple Jquery plugin

I'm experimenting with Jquery plugins. (please note I'm a beginner) and I've made a very simple plugin. this works if I set the selector to ('div') but when I try to make it so it only selects the divs with a class that contains "object" it fails. what am I doing wrong? I'm not getting any errors.
javascript:
(function( $ ) {
$.fn.Duplo = function() {
return this.filter("div[class*='object']").clone().appendTo('body');
};
}( jQuery ));
$(document).ready(function(){
$( ".negen" ).Duplo();
});
html:
<body>
<div class="row">
<div class="col-md-12 col-sm-12 twaalf">
</div>
</div>
<div class="container">
<div class="col-md-3 col-sm-3 drie">
</div>
<div class="col-md-9 col-sm-9 negen">
<div class="object"></div>
<div class="object2"></div>
<div class="object3"></div>
<div class="object4"></div>
</div>
</div>
</body>
My html contains four divs with the classes: object, object1, object2, object3 Also .negen is the div wich contains all of these.
Thanks :)

If you expect to filter .negen elements which contains some specific elements with class containing object, then use:
this.filter(":has(div[class*='object'])").clone().appendTo('body');
This could be written as:
return this.has("div[class*='object']").clone().appendTo('body');
If you want to clone elements object, then use:
return this.find("div[class*='object']").clone().appendTo('body');

You have to change your selector statement
"("div[class*='object']")" this part
check this
http://api.jquery.com/category/selectors/

Try this.
return this.find(".object").clone().appendTo('body');
Fiddle Demo

Add class to odd and even table class to float them left and right

Looked at some answers for this question but i have tried a few and cant get it working.
How would i add a class to each to separate odd and even tables , i tried this but cant get it working
<script type="text/javascript">
$(document).ready(function () {
$('.leaguehistorymodule:odd').addClass("column-left");
$('.leaguehistorymodule:even').addClass("column-right");
});
</script>
Here is the current HTML
<div id="mfl-singlegame">
<div id="HPG" class="leaguehistorymodule"></div>
<div id="LPG" class="leaguehistorymodule"></div>
<div id="LPIW" class="leaguehistorymodule"></div>
<div id="HPIL" class="leaguehistorymodule"></div>
<div id="HCOMB" class="leaguehistorymodule"></div>
<div id="LCOMB" class="leaguehistorymodule"></div>
<div id="WINMARGIN" class="leaguehistorymodule"></div>
<div id="LOWMARGIN" class="leaguehistorymodule"></div>
</div>
I want the HTML to be this after script runs
<div id="mfl-singlegame">
<div id="HPG" class="leaguehistorymodule column-left"></div>
<div id="LPG" class="leaguehistorymodule column-right"></div>
<div id="LPIW" class="leaguehistorymodule column-left"></div>
<div id="HPIL" class="leaguehistorymodule column-right"></div>
<div id="HCOMB" class="leaguehistorymodule column-left"></div>
<div id="LCOMB" class="leaguehistorymodule column-right"></div>
<div id="WINMARGIN" class="leaguehistorymodule column-left"></div>
<div id="LOWMARGIN" class="leaguehistorymodule column-right"></div>
</div>

Side note,
:even will select the elements with index 0,2,4 .. n
:odd will select the elements with index 1,3,5 .. n
Try,
$('.leaguehistorymodule:even').addClass("column-left");
$('.leaguehistorymodule:odd').addClass("column-right");
DEMO

When you use :odd/:even selectors, it works on 0 based indexes so the first element will be an even element and the second will be odd one because their indexes are 0 and 1 respectively.
I would recommend using :nth-child() selector to make use of native selector support
$(document).ready(function () {
$('.leaguehistorymodule:nth-child(odd)').addClass("column-left");
$('.leaguehistorymodule:nth-child(even)').addClass("column-right");
});

jquery : dynamic events how to achieve

What is the best way to do this dynamic events linking between divs in jquery.
my HTML page:
<html>
<body>
<div id="parent1"></div>
<div id="parent2"></div>
<div id="parent3"></div>
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</body>
</html>
for each clicked parent i want to .toggle its child
Example :: if parent2 clicked, .toggle will be applied on child2 only
my parents and childs divs are dynamically created so their number is not static, i think .live should be used here, but i have no idea how to achieve that.
Thanks

This should do it, using the rel attribute to note link. You could also do the same thing by parsing the ID and so on, but I find this solution more semantic (if it means something) :
<html>
<body>
<div id="parent1" class="parents" rel="child1"></div>
<div id="parent2" class="parents" rel="child2"></div>
<div id="parent3" class="parents" rel="child3"></div>
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</body>
</html>
jQuery(function(){
jQuery(".parents").live("click", function(){
jQuery("#"+jQuery(this).attr("rel")).toggle();
});
});

This will work with your current structure (another option is to extract the number, same general idea):
$("[id^=parent]").live('click', function(){
var childId = this.id.replace('parent', 'child');
$('#' + childId).toggle();
});

Using the startsWith selector and slightly modded ID values, because the underscore character eliminates the need for a regex:
<div id="parent_1" class="parents"></div>
<div id="parent_2" class="parents"></div>
<div id="parent_3" class="parents"></div>
<div id="child_1"></div>
<div id="child_2"></div>
<div id="child_3"></div>
$("div[id^=parent]").click(function() {
$('#child_' + $(this).attr('id').split('_')[1]).toggle();
});
I also like #Kobi's approach.

Use a class for these divs and use the class selector.
$(".divclass").live ( "click" , function() {
$(this).find("yourchildelementselector").toggle();
});
If its a parent child relation then better put the child divs inside the parent element.
<div id="parent1" class="parent"><div id="child1" class="child"></div></div>
<div id="parent2" class="parent"><div id="child2" class="child"></div></div>
<div id="parent3" class="parent"><div id="child3" class="child"></div></div>
and you can call the click event as
$("div.parent").live ( "click" , function() {
$(this).find("div.child").toggle();
});