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
Related
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
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.
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");
});
I'm trying to get all the next html code and excluding the DIV with ID=fiscal-address-info using jquery. I started using filter method but no lucky.
This is the original snippet code.
<div id="fiscal-info" class="content-fields">
<div class="content-title"><h2>Datos Fiscales</h2></div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div id="fiscal-address-info">
<div class="row">...</div>
<div class="row">...</div>
</div>
What I'd like to get is:
<div id="fiscal-info" class="content-fields">
<div class="content-title"><h2>Datos Fiscales</h2></div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
</div>
This is what I've tried:
$('#fiscal-info').filter('#fiscal-address-info');
You can use the filter method and using a not selector:
$("#fiscal-info").children().filter(":not(#fiscal-address-info)")
This return you all the fiscal-info children ,except the excluded one.
You can use the .not() method or :not() selector
http://api.jquery.com/not-selector/
Code based on your example:
$('div#fiscal-info div').not("#fiscal-address-info");
Have a look into this fiddle
$( "div" ).filter( $( "#fiscal-address-info" ) );
Gets all div elements and filters them for id #fiscal-address-info
Hope this helps!
$('#fiscal-info div').filter(function () {
return this.id == 'fiscal-address-info'
}).remove();
jsFiddle example
I've got this code below, with different data, repeated over 10 times on the page I am working on:
HTML:
<div class="kpaGraph">
<p>Target: 43%</p>
<div class="progress">
<div class="bar"></div>
</div>
</div>
<div class="kpaBottom">
<div class="strong">
<p>311</p>
</div>
<div class="weak">
<p>number of teachers trained</p>
</div>
</div>
I want to alter the number in div.strong p (311) based on the number in div.kpaGraph p (43%) in the same manner across all instances of this code with Javascript/ jQuery. What is the cleanest way to do this? Should I select all $('div.kpaGraph p') and then use each() Or should I create a function and run it on all of them?
Thanks!
You can use the following to find the proper element in conjuntion with an .each() on $('div.kpaGraph p'):
$(this).parent().next('div.kpaBottom').find('div.strong p')
For example, using the following will take the value in the kpaGraph p node and append it to the p node in the following kpaBottom node:
$('div.kpaGraph p').each(function () {
$(this).parent().next('div.kpaBottom').find('div.strong p').html('foo');
});
jsFiddle example
There are a few ways.
You can use "next".
$('.kpaGraph').each(function(){
var $kpaStrong = $(this).next('.kpaBottom .strong p');//this is the elm that has 311
});
Or you have to somehow create a relation between them so you know they go together, like a common parent.
<div class="kpaWr">
<div class="kpaGraph">
<p>Target: 43%</p>
<div class="progress">
<div class="bar"></div>
</div>
</div>
<div class="kpaBottom">
<div class="strong">
<p>311</p>
</div>
<div class="weak">
<p>number of teachers trained</p>
</div>
</div>
</div>
Then with jQuery you can select it like so:
$('.kpaGraph').each(function(){
var $kpaStrong = $(this).closest('.kpaWr').find('.kpaBottom .strong p');//this is the elm that has 311
});
Something like this might be pretty clean too:
$("div.strong p").text(function(index, text){
return $(this).closest("div.kpaBottom").prev("div.kpaGraph").find("p").text();
});
That would change the text to Target: 43% in your example.