Here is the code up to now. i want to access the value 1 of the <div class="field-item even">1</div>, and then if the value is 1 add a class, if the value is 0, add a another class. My code only access the first field-collection-container, i can't figure it out the problems.
$(document).ready(function () {
jQuery.each($('.field-collection-container'), function (i, obj) {
alert($(this).find('.field-items .content .field-item').text());
})
});
the html
<div class="container">
<div class="field-collection-container clearfix">
<div class="field field-name-field-interview-feeling field-type-field-collection field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items">
<div class="field-item even">
<div class="field-collection-view clearfix view-mode-full field-collection-view-final">
<div class="entity entity-field-collection-item field-collection-item-field-interview-feeling clearfix" about="/dtesthkinterview/field-collection/field-interview-feeling/4" typeof="">
<div class="content">
<div class="field field-name-field-19 field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items">
<div class="field-item even">1</div>
</div>
</div>
<div class="field field-name-field-no-people field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items"><div class="field-item even">0</div></div>
</div>
<div class="field field-name-field-untrust field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items"><div class="field-item even">0</div></div>
</div>
<div class="field field-name-field-waste-money field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items"><div class="field-item even">0</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="field-collection-container clearfix">
.....
</div>
<div class="field-collection-container clearfix">
.....
</div>
$('.field-collection-container .field-items .field-item').addClass(function () {
return $(this).text() === "1" ? "one-class" : "another-class";
});
Note that you do not need .each() at all.
You could use $.trim($(this).text()) if you expect spaces to be present.
jQuery.each($('.field-collection-container .field-items .content .field-item'), function (i, obj) {
if($(this).text() == "1"){
$(this).addClass("someclass");
}else if($(this).text() == "0"){
$(this).addClass("anotherClass");
}
});
Working Example http://jsfiddle.net/P9meu/
Check this sample on jsFiddle
http://jsfiddle.net/vijaypatel/Q2GHV/
$(function () {
$('.field-collection-container').each(function (index, obj) {
$(this).find('.field-items .content .field-item').each(function (index, obj) {
alert($(this).text());
if ($(this).text() == '1') {
$(this).prop('class','One');
} else {
$(this).prop('class','Zero');
}
});
});
});
Above code is woroking fine with multiple "field-collection-container" and also modify odd even elements
<div class="field-items">
<div class="field-item even">
<div class="field-collection-view clearfix view-mode-full field-collection-view-final">
<div class="entity entity-field-collection-item field-collection-item-field-interview-feeling clearfix" about="/dtesthkinterview/field-collection/field-interview-feeling/4" typeof="">
<div class="content">
<div class="field field-name-field-19 field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items">
<div ***id="id1"*** class="field-item even">1</div>
</div>
Instead of calling like this
$(document).ready(function () {
jQuery.each($('.field-collection-container'), function (i, obj) {
alert($(this).find('.field-items .content .field-item').text());
})
});
u can use id for a div and call like this
$(document).ready(function () {
{
var t=$("#id").text();
alert(t);
if(t==1)
{
$("#id1").addClass(".classname");
}
else
{
if(t==0)
{
$("#id1").addClass(".anotherclassname");
}
}
})
Please find the below code and i hope it solves your problem
$("div.content").find("div.field-item").each(function () {
if ($(this).html() == 1)
$(this).addClass("evenDivClass");
else if ($(this).html() == 0)
$(this).addClass("oddDivClass");
});
If you really only want the alternating fielditem divs in different classes you could try
$.each($(".field-item").find(".even"), function(i,o){ if(o.textContent==="1") $(o).addClass("some"); if(o.textContent==="0") $(o).addClass("other");)
Which is short and fast.
Here is an example of a javascript solution
var fieldItems = document.querySelectorAll(".field-collection-container .field-item");
Array.prototype.forEach.call(fieldItems, function (fieldItem) {
var text = fieldItem.textContent.trim();
if (text === "0") {
fieldItem.className += " Zero";
} else if (text === "1") {
fieldItem.className += " One";
}
});
On jsfiddle
Related
I have some code where I need to hide a div if another is empty.
Basically, if .plant_profile_link has no content, hide .plant_profile_display
My attempt
$(document).ready(function() {
if (!$.trim($(".plant_profile_link").html()) == true)
$(".plant_profile_display").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
Your code works if we add jQuery
I would user toggle
$(function() {
$(".plant_profile_display").toggle($(".plant_profile_link").text().trim() !== "");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
Maybe something like this suits you
$(document).ready(function() {
var $plantLinks = $('.plant_profile_link')
var $plantDisplay = $('.plant_profile_display')
if($plantLinks.children().length > 0 || $plantLinks.text().length > 0) {
$plantDisplay.show();
} else {
$plantDisplay.hide();
}
});
I am trying to replace the content of the divs on checkbox's check/un-check events.
HTML:
<div class="checks">
<input type="checkbox" class="section-1" value="section-1">check-1
<input type="checkbox" class="section-2" value="section-2">check-2
<input type="checkbox" class="section-3" value="section-3">check-3
<input type="checkbox" class="section-4" value="section-4">check-4
<input type="checkbox" class="section-5" value="section-5">check-5
<input type="checkbox" class="section-6" value="section-6">check-6
<input type="checkbox" class="section-7" value="section-7">check-7
</div><br><br>
<div class="divs">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
<div class="divs-back" style="display: none">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
jQuery:
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
if ($(this).prop('checked')) {
// Add the new element if checked:
if (array.indexOf($(this).val()) < 0) {
array.push($(this).val());
unChecked = unArray.slice(-1)[0];
unArray.splice(-1, 1);
}
} else {
// Remove the element if unchecked:
if (array.indexOf($(this).val()) >= 0) {
array.splice(array.indexOf($(this).val()), 1);
unArray.push($(this).val());
unChecked = 0;
}
}
showHideDiv($(this).val(), unChecked);
console.log(array);
console.log(unArray);
});
function showHideDiv(value, unCheked) {
console.log(unCheked);
if (unCheked != '0') {
$('.divs').find("." + unCheked).html($('.divs-back').find("." + value).html());
} else {
$('.divs').find("." + value).html('');
}
}
It is replacing the contents successfully on first attempt. But on the second attempt, the positions of the div contents are changed so not getting the desired output.
jsfiddle: https://jsfiddle.net/2th5gmLa/
Edit:
Actually, I don't want to just hide show. I want to replace the div content on last unchecked section. When I uncheck Section-1, Section-2, Section-3, then if we check section-1, then it should place in the DIV of the Section-3.
Why your code is not working?
The issue is you are pushing element. The push() method adds new items to the end of an array, and returns the new length.
//array.push($(this).val());
remove this line
Change you have to make.
$('input[type="checkbox"]').click(function() {
var unchkdArray = [];
var chkdArrray = [];
$('input[type="checkbox"]').map(function(){
if ($(this).is(':checked')) {
chkdArrray.push($(this).val())
} else {
unchkdArray.push($(this).val())
}
});
var selected = $(this).val()
if ($(this).is(':checked')) {
$('div.' + selected).show()
} else {
$('div.' + selected).hide()
}
});
Fiddle Demo
Try this...
Plunker Link
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
console.log($(this)['context']['className']);
$( ".divs ."+$(this)['context']['className'] ).toggleClass( "hide" )
});
Plunker Link
I have this html code:
<div class="first div">
<div class="second">
<div class="title">Hi</div>
<div class="test-icon" style="background-image: url(https://1.jpg);"></div>
</div>
</div>
<div class="first div">
<div class="second">
<div class="title">Hi</div>
<div class="test-icon" style="background-image: url(https://12.jpg);"></div>
</div>
</div>
<div class="first div">
<div class="second">
<div class="title">Hi</div>
<div class="test-icon" style="background-image: url(https://123.jpg);"></div>
</div>
</div>
<div class="first div">
<div class="second">
<div class="title">Hi</div>
<div class="test-icon" style="background-image: url(https://good.jpg);"></div>
</div>
</div>
Is it possible to delete all elements with "first div" class if the background image is not: url(https://good.jpg);? so the final response will be:
<div class="first div">
<div class="second">
<div class="title">Hi</div>
<div class="test-icon" style="background-image: url(https://good.jpg);"></div>
</div>
</div>
I would be grateful for any assistance, thank you!
Here is a WORKING FIDDLE of your example:
$('.first').find('.test-icon').each(function(){
if($(this).css('background-image').indexOf("good") == -1){
$(this).closest('.first').remove();
}
});
Check FIDDLE to add multiple images
$('.first').find('.test-icon').each(function(){
if($(this).css('background-image').indexOf("good.jpg") == -1 &&
$(this).css('background-image').indexOf("good1.jpg") == -1 &&
$(this).css('background-image').indexOf("good2.jpg") == -1){
console.log($(this).closest('.first').remove());
}
});
Filter the divs having content with good.jpg and remove the negation with not() and remove():
$('.first.div').not($('.first.div').filter(
function(index, element)
{
return $(element)
.find(".test-icon")
.css('background-image').indexOf("good") >= 0
}
)).remove();
var first_div = $('div.first.div');
for (var i = 0; i < first_div.length; i++) {
var background_image = $(first_div[i]).find('.test-icon').css('background-image');
if (background_image !== 'url(https://good.jpg)') {
$(first_div[i]).remove();
}
}
Hope this help!
You need traverse all .text-icon elements with each function of JQuery.
$( "div.first .text-icon" ).each(function( ) {
if( $( this ).css('background-image')!='url(https://good.jpg)' ) {
$( this ).remove();
}
});
Working example using slice to extract each image url:
$('.first').each(function(){
var img_url = $(this).find('.test-icon').css('background-image').slice(5, -2);
if (img_url != "https://good.jpg/"){
$(this).remove();
}
});
You could achieve this like below:
var bg = $('first').find('.text-icon').filter(function(bg) {
return $(bg).css('background-image') === 'url(https://good.jpg)';
//although you should use '/good.jpg')
)};
bg.hide();
You can try this
if ($('.test-icon').attr('background-image') != "https://good.jpg") {
$('.first div').remove();
}
If you want to delete the all "first div" class..
I have a development issue with jQuery script. I've tried to find something to re-purpose but have not been able to find exactly what I need. So I took a stab at writing something but have yet to get it to work correctly and I'm such a novice that I cannot seem to figure it out.
I am trying to get 2 radio buttons (first grouping of 3, second grouping of 2) to return 1 of 6 div tags on selection of both radio buttons.
I only wrote enough script for just clinical with either sales or support options.
html:
<div class="input-quest">Question 1</div>
<div id="optSelectBU">
<input type="radio" name="button1" value="clinical" />
<label>Clinical</label>
<input type="radio" name="button1" value="financial" />
<label>Financial</label>
<input type="radio" name="button1" value="pharmacy" />
<label>Pharmacy</label>
</div>
<div class="input-quest">Question 2</div>
<div id="optSelectService">
<input type="radio" name="button2" value="support" />
<label>Support</label>
<input type="radio" name="button2" value="sales" />
<label>Sales</label>
</div>
<div id="Clinical-Support">
<div class="block">
<div class="input-quest">Div 1</div>
</div>
</div>
<div id="Clinical-Sales">
<div class="block">
<div class="input-quest">Div 2</div>
</div>
</div>
<div id="Financial-Support">
<div class="block">
<div class="input-quest">Div 3</div>
</div>
</div>
<div id="Financial-Sales">
<div class="block">
<div class="input-quest">Div 4</div>
</div>
</div>
<div id="Pharmacy-Support">
<div class="block">
<div class="input-quest">Div 5</div>
</div>
</div>
<div id="Pharmacy-Sales">
<div class="block">
<div class="input-quest">Div 6</div>
</div>
</div>
Script:
$(document).ready(function () {
$("#Clinical-Support").hide();
$("#Clinical-Sales").hide();
$("#Financial-Support").hide();
$("#Financial-Sales").hide();
$("#Pharmacy-Support").hide();
$("#Pharmacy-Sales").hide();
$("#optSelectBU").change(function () {
if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "sales") {
$("#Clinical-Sales").show();
} else {
$("#Clinical-Support").hide();
$("#Clinical-Sales").hide();
$("#Financial-Support").hide();
$("#Financial-Sales").hide();
$("#Pharmacy-Support").hide();
$("#Pharmacy-Sales").hide();
}
});
$("#optSelectBU").change(function () {
if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "support") {
$("#Clinical-Support").show();
} else {
$("#Clinical-Support").hide();
$("#Clinical-Sales").hide();
$("#Financial-Support").hide();
$("#Financial-Sales").hide();
$("#Pharmacy-Support").hide();
$("#Pharmacy-Sales").hide();
}
});
});
Here is fiddle link:
http://jsfiddle.net/schoward30506/LV5nQ/3/
Its not pretty, but if you use data-attributes rather than the id then you could simplify your code massively:
$(document).ready(function () {
$("div[data-cats]").hide();
$("input[name=button1], input[name=button2]").change(function () {
var b1 = $('input[name=button1]:checked').val();
var b2 = $('input[name=button2]:checked').val();
$("div[data-cats]").hide();
$("div[data-cats='"+b1+" "+b2+"']").show();
});
});
http://jsfiddle.net/LV5nQ/6/
i fiddled around and came to this solution.
please keep in mind, that i added a div#container around your changing divs.
http://jsfiddle.net/honk1/LV5nQ/10/
$(document).ready(function () {
$("#container > div").hide();
var input1, input2;
function checkboxChecker() {
if ( input1 === "clinical" && input2 === "sales" ) {
$("#Clinical-Sales").show().siblings("div").hide();
} else if ( input1 === "clinical" && input2 === "support" ) {
$("#Clinical-Support").show().siblings("div").hide();
} else {
$("#container > div").hide();
}
};
$("input[name=button1], input[name=button2]").change(function () {
input1 = $('input[name=button1]:checked').val();
input2 = $('input[name=button2]:checked').val();
checkboxChecker();
});
});
I have this Markup, and the way this is supposed to work is the user click on the "icon arrow" and this following JS is supposed to fire which will display the hidden content, in other words opening the window. this works in another program, but is there any reason this is not firing.
Here is the markup:
<div data-bind="foreach {data:movies}">
<div class="content-item full bottom-border">
<div class="content-item-container">
<div class="movie-listing-header">
<a class="icon arrow"></a>
<div class="movie-details">
<div class="title"></div>
<div class="info">
<div>
<span class="rating" data-bind="css: 'rating-' + (MovieRating || 'NR').toLowerCase().replace(/-/, '')"></span>
</div>
</div>
</div>
<a class="icon right-arrow"></a>
</div>
<div class="showtimes">
<div data-bind="template: { name: 'movie-grouped-showtimes-template', data: $data }"></div>
</div>
</div>
</div>
</div>
and here is the .js
$(document).ready(function () {
$('.icon.arrow').click(function () {
var active_el = $(this);
$('.movie-listing-header').each(function () {
if ($(this).get(0) === active_el.parent().get(0)) {
if ($(this).hasClass('active')) {
$(this).siblings('.showtimes').hide();
} else {
$(this).siblings('.showtimes').show();
}
$(this).toggleClass('active');
} else {
$(this).removeClass('active');
$(this).siblings('.showtimes').hide();
}
});
});
});