I need some help adding a class to a div if is has an image to it.
<div class="large-6 columns check-Div">
<div class="custom-table">
<div class="text">
<?php echo $latestimage; ?>
</div>
<div class="custom-table-box">
<?php echo $table; ?>
</div>
</div><!-- end custom-table -->
</div>
if ($j(".large-6.columns.check-Div > .custom-table-box:contains('size-full')")) {
$j('.large-6.columns.check-Div').addClass("hasImage");
}
The jQuery above is adding the hasImage class to all of the divs but I only want it to apply when there is a div that contains a image. Is there a way to do it singularly? Or by parent? I have tried but I'm a little lost.
Any help would be wonderful!
You can do this using jquery no need to add if condition
jQuery(".custom-table-box:has(img)").parents(".check-Div").addClass("hasImage");
You can do this by removing the if statement and just adding the class based on the :has selector:
$j('.large-6.columns.check-Div:has(img)').addClass('hasImage');
For clarity I have added additional background color
$(".custom-table").children("div").each(function(item,index) {
$(this).has("img").css("background-color", "red"); // Comment it if not needed
$(this).has("img").addClass("hasImage");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-6 columns check-Div">
<div class="custom-table">
<div class="text">
xyz<img />
</div>
<div class="custom-table-box">
abc
</div>
</div>
</div>
CSS :has selector is what you are looking for (here for a direct descendant)
$('div:has(> img)').addClass("hasImage") //jquery way
or just in css (but this would require a polyfill, as its in Level 4, which is draft currently)
div:has(> img) {
border-color: 1px solid red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
JSfiddle here: https://jsfiddle.net/y6gtt2vg/1/
Browser support
About CSS Selector Compatibility
Regardless of a browser's support of CSS selectors, all selectors listed at api.jquery.com/category/selectors/ will return the correct set of elements when passed as an argument of the jQuery function.
https://jquery.com/browser-support/
I think you should try using id.
<div id="addImg" class="large-6 columns check-Div">
<div class="custom-table">
<div class="text">
<?php echo $latestimage; ?>
</div>
<div class="custom-table-box">
<?php echo $table; ?>
</div>
</div><!-- end custom-table -->
</div>
if ($j(".large-6.columns.check-Div > .custom-table-box:contains('size-full')")) {
$j('#addImg').addClass(".hasImage");//also missing . for class
}
Try this code
$('.large-6 .columns .check-Div div:has(img)').addClass('hasImage');
Related
My guess is what I want to achieve should be easy, but due to my lack of knowledge of front-end development, I cannot manage to solve issue. Have a page that works with AJAX-filters that users can select. Filters that are currently applied show up within <div> with id=current-filters.
HTML looks like this:
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<!-- here every single applied filter is displayed -->
</div>
</div>
</div>
Need to hide the the entire DIV current-filters-box in case no filter is applied.
The page uses a Javascript file, bundle.js which is massive, but contains the following line:
s=document.getElementById("current-filters")
Therefore tried the following if-statement to hide the DIV:
if(s.length<1)$('#current-filters-box').hide()
and
if(s=0)$('#current-filters-box').hide()
But this does not seem to have any effect. Can someone tell, what I did wrong?
Demo of page can be found here
EDIT: this is what the HTML looks like when filters are applied:
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<div class="badge-search-public">
<strong>Humanities & Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
</div>
<div class="badge-search-public">
<strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
</div>
</div>
</div>
Both of your conditions are incorrect or I would say they are not doing what you think they do.
s.length will always prints undefined so instead of s.length<1 you could use s.children.length
and the second one is not a condition rather it is an assignment
s==0 // condition
s=0 //assignment
the correct condition for your requirement would be
if(s.children.length<1){
I have assigned snippets for illustration.
Without filters
s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
$('#current-filters-box').hide(1000)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-filters-box">
filter box
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<!-- here every single applied filter is displayed -->
</div>
</div>
</div>
Without filters
s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
$('#current-filters-box').hide(1000)
}
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<div class="badge-search-public">
<strong>Humanities & Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
</div>
<div class="badge-search-public">
<strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
</div>
</div>
</div>
Try this .
if( $('#current-filters').is(':empty') ) {
$('#current-filters-box').hide()// or $('#current-filters-box').css("display","none")
}
You are performing an assignment, try..
if (s.children.length)
Using vanilla JavaScript, you can check if the current-filters div is empty or not and toggle the parent div current-filters-box like this:
s= document.getElementById("current-filters");
t= document.getElementById("current-filters-box");
if(s.children.length<1) {
t.style.display = 'none';
// t.style.visibility= 'hidden'; <<-- use this if you want the div to be hidden but maintain space
}
else {
t.style.display = 'block';
// t.style.visibility= 'visible'; <<-- use this if you used visibility in the if statement above
}
You can achieve this by adding your own variable which counts or maintains your applied filters, e.g.
var applied_filter_count = 0;
at every time filter is applied
applied_filter_count++;
if(applied_filter_count) {
$('#current-filters-box').show()
}
and at every time filter is removed
applied_filter_count--;
if(!applied_filter_count) {
$('#current-filters-box').hide()
}
and by default current-filters-box should be display:none
I'm trying to update a div with a static value but replaceWith seems to be less collaborative than I was thinking.
This is the function:
updatePeopleNumber: function(peopleNumber) {
var numberItem = jQuery("#visitors-container");
numberItem.find("vn").replaceWith(peopleNumber);
}
Again: peopleNumber is a static value set right before this function is called. This is the HTML:
<div id="row-2" class="row">
<div id="visitors-container">
<div id="visitors-number" class="vn"><?php echo getPeopleNumber(); ?></div>
<div id="visitors-text">visitors today</div>
</div>
</div>
The PHP code is there for security reasons: if no value is set, then the PHP comes in. But I need the js code to replace the value in the div with peopleNumber...
If someone is wondering: no, deleting the PHP code doesn't solve the problem...
Whereas you don't use the returned value of the replaceWith method you can use instead of it the jquery.html setter
numberItem.find(".vn").html(peopleNumber);
Also you missed the dot for the class name numberItem.find(".vn")
You have error in your selector at find("vn"). You forgot the class selector ..
updatePeopleNumber: function(peopleNumber) {
var numberItem = jQuery("#visitors-container");
numberItem.find(".vn").replaceWith(peopleNumber);
}
You can do :
<div id="row-2" class="row">
<div id="visitors-container">
<div id="visitors-number" class="vn"><span><?php echo getPeopleNumber(); ?></span></div>
<div id="visitors-text">visitors today</div>
</div>
</div>
JavaScript
$('#visitors-number').find("span").text(peopleNumber);
<div id="CntWrapper_CntMain_ssm_ctl00_ctl01" class="matrix">
<div class="CollapseGroup1"></div>
<div class="row">
<div class="cell_24"> </div>
</div>
<div class="row">
<div class="cell_24">
<span class="label-passive">text</span>
</div>
</div>
<div class="CollapseGroupClose1"></div>
</div>
I'm trying to manipulate above HTML code sample. It's a simplified version the actual HTML code.
<script type="text/javascript">
$(document).ready(function() {
$('.CollapseGroup1').nextUntil('.CollapseGroupClose1',').css( "display", "none" );
});
</script>
This script hides all the div with class 'row' between the two divs called collapsegroup and collapsegroupclose.
However, I only want to hide the div elements with class 'Row' when any of these rows contain at least one span with class 'label-passive'.
<script type="text/javascript">
$(document).ready(function() {
$('.CollapseGroup1').nextUntil('.CollapseGroupClose1','div[.label-passive]').css( "display", "none" );
});
</script>
Just simply hiding any row div when there is a span with label-passive is not good enough. There can be rows with 'label-passive' span classes outside these collapsegroup divs that I don't want to hide.
I want to hide all rows between two collapsegroup tags, even when just one of these rows actually has a child span element with class 'label-passive'.
So, after reading your question once.. Twice.. Trice.. I think you want this:
(pro-tip: try to keep your questions as simple as possible, using pseudo-code if you must)
$('.label-passive').parents('._row').hide();
If this isn't completely what you wanted, leave a comment and I'll try to improve the answer.
Edit: Improved answer as OP improved his question:
Maybe this will help you further then:
$('.CollapseGroup1').each(function() {
if ($(this).find(".label-passive").length != 0)
$(this).hide();
});
You can simply try this:
$('div.row:has(.label-passive)').hide();
Try closest():
$('span.label-passive').closest('div.row').hide();
$(function() {
$('span.label-passive').closest('div.row').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="CntWrapper_CntMain_ssm_ctl00_ctl01" class="matrix">
<div class="CollapseGroup1"></div>
<div class="row">
<div class="cell_24"> </div>
</div>
<div class="row">
<div class="cell_24">
<span class="label-passive">text</span>
</div>
</div>
<div class="CollapseGroupClose1"></div>
</div>
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.
I need to add a class to a div inside a shadowbox and I am using jQuery to do this.
jQuery("#all_records #"+id).addClass("selectedDiv");
In such circumstances, I usually check if I am calling the right div, and in this case it turns out I am. But unfortunately, it is never adding the class to the div.
<div id="all_records">
<div id="50157186" class="records_dealer_activation" onclick="select_customer(50157186);">
</div>
</div>
function select_customer(id){
jQuery('#sb-player #choosen_customer_activation_duplicate').prepend('<div class="overlay"> <div class="modalprogress"> <div class="theprogress"> <img class="image_load" src="<?php echo base_url();?>images/progress_bar.gif" alt="loadanimation" /></div> </div> </div> ');
jQuery("#sb-player #choosen_customer_activation_duplicate").load("<?php echo site_url().'/'.$main_controller;?>"+"/load_show_selected_customer_activation/?customerID="+id+"&type=duplicate");
if(jQuery("#all_records > div").hasClass("selectedDiv"))
{
//THIS IS WORKING
jQuery("#all_records > div").removeClass("selectedDiv");
}
//NOT WORKING
//alert(jQuery("#sb-player #all_records #"+id).html());
//document.getElementById(id).className += "selectedDiv";
jQuery("#all_records #"+id).addClass("selectedDiv");
}
Any suggestions?
Can you post your javacript function, btw this work for me:
<script type="text/javascript">
function select_customer(id){
jQuery("#" +id).addClass("selectedDiv");
}
</script>
<div id="all_records">
<div id="50157186" class="records_dealer_activation" onclick="select_customer(50157186);">
Click me
</div>
</div>