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..
Related
what I'm trying to do is to check if my inner <div> has a text for example Ended and then remove if it has a text. I have multiple <div> with the same class name. I tried using .filter(). I would like to remove the div container_one that contains the found element.
Here is my HTML:
var $filstatus = $('.status').filter(function() {
return $(this).text() == 'Ended';
});
$filstatus.remove();
<div class="main_container">
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">On going</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
</div>
Thank you for the help!
I would use the jQuery's selector by content
combined with .closest(). This might be the shortest way:
$('.status:contains("Ended")', $('.main_container')).closest('.container_one').remove();
First ('.status:contains("Ended")') will select all elements that have a class status, contain the text "Ended" and are children of main_container (not needed but is recommended to speed up selection of elements on complex pages).
Then the method .closest('container_one') will climb up the parents tree for each of the elements from the previous step and select the first parent element with class 'container_one'.
At last it will remove all elements found.
Note: all those methods work both with single element and collections of elements, so no need of any for/foreach.
Working JSFiddle Demo
Pure JavaScript solution with forEach:
var div = document.querySelectorAll('.container_one');
div.forEach(function(el){
var target = el.querySelector('.status');
if(target.textContent == 'Ended'){
el.remove();
};
})
<div class="main_container">
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">On going</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
</div>
Try this
$filstatus.parent().parent().remove();
filter will return an array , then use each to loop over that and delete the element. In this case it will remove that specific div but the parent div will still be in dom
var $filstatus = $('.status').filter(function() {
return $(this).text().trim() === 'Ended';
});
$filstatus.each(function(index, elem) {
$(elem).remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_container">
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">On going</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
</div>
If you want to remove .container_one whose inner child has the text Ended, try
const ended = $('.status').filter((index, element) => $(element).text() === 'Ended')
ended.parents('.container_one').remove()
Since you want to remove the closest ansistor with class .container_one, you will need to use closest
$filstatus.closest(".container_one").remove();
Check this: https://jsfiddle.net/n3d5fwqj/1/
https://api.jquery.com/closest/
Try using this if you don't need $filstatus in other places
$('.status').each(function(){
if ($(this).text() == "Ended"){
$(this).parent().parent().remove();
}
})
I see your problem is you are able to remove the child div status but what you want is to remove the entire parent div with class container_one
you can use $.each for that and use closest(class_name) to remove the parent including its child
$.each($('.status'), function(idx, div) {
if ($(this).text() == 'Ended') {
$(this).closest('.container_one').remove();
}
});
Demo
or you can continue your filter and just add .closest('.container_one') to your jquery selector
var $filstatus = $('.status').filter(function() {
return $(this).text() == 'Ended';
});
$filstatus.closest('.container_one').remove();
Demo
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
Here is what I trying to do:
When I type into the input field I want the top level div.container-fluid to change colors. Right now I can only get the .xdiv area to change but not any divs that are higher than that.
Here is my code:
<script>
$(function () {
$('input[type="text"]').keypress(function () {
var $this = $(this),
$div = $(this).parent();
if ($this.val().length > 0) {
$div.addClass("hasContent");
} else {
$div.removeClass("hasContent");
}
});
});
</script>
<style>
.container-fluid.hasContent { background-color: red }
</style>
<div class="container-fluid linear-Algebra" id="{{id}}">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span8 grid-layout">
<legend>Grid Layout:</legend>
<div class="span4">
<div class="xdiv">
<label>x:</label>
</div>
</div>
<div class="span4 offset1">
<div class="ydiv">
<label>y:</label>
</div>
</div>
</div>
<div class="span3">
<legend>Options:</legend>
<div class="btngroup">
<label class="checkbox" class="cbl">
</label>
</div>
<label>Actions:</label>
<div class="btngroup">
</div>
</div>
</div>
</div>
</div>
</div>
DEMO
CHANGE THIS
$div = $(this).parent();
TO
$div = $(this).parents('.container-fluid');
parents('.container-fluid') find the parent with class container-fluid
Change this:
$div = $(this).parent();
to this:
$div = $('.container-fluid')[0];
Also, where is your input element?
You can use jQuery.closest -
var containerDiv = $(this).closest('.container-fluid');
From jquery closest page (http://goo.gl/tHBRx) -
Description: For each element in the set, get the first element that
matches the selector by testing the element itself and traversing up
through its ancestors in the DOM tree.
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
I would like to use jQuery to wrap sets of class elements in a div but can't find the solution.
HTML:
<div class="view-content">
<div class="first">content</div>
<div class="first">content</div>
<div class="second">content</div>
<div class="third">content</div>
<div class="third">content</div>
</div>
Desired Result:
<div class="view-content">
<div class="column">
<div class="first">content</div>
<div class="first">content</div>
</div>
<div class="column">
<div class="second">content</div>
</div>
<div class="column">
<div class="third">content</div>
<div class="third">content</div>
</div>
</div>
Demo http://jsfiddle.net/kQz4Z/8/
API: http://api.jquery.com/wrapAll/
Added a break line so that you can see the difference here :) http://jsfiddle.net/kQz4Z/10/
code
$(function() {
$('.first').wrapAll('<div class="column" />')
$('.second').wrapAll('<div class="column" />')
$('.third').wrapAll('<div class="column" />')
alert($('.view-content').html());
});
Use wrapAll() method
$(function(){
var classes = ['.first', '.second', '.third'];
for (i = 0; i < classes.length; i++) {
$(classes[i]).wrapAll('<div class="column">');
}
});
Demo: http://jsfiddle.net/g9G85/
Or here is the very short dynamical solution:
$(".view-content > div").each(function() {
$(".view-content > ." + this.className).wrapAll("<div class='column' />");
});
DEMO: http://jsfiddle.net/CqzWy/
You can use .wrap() to wrap something in a div but if your content is not ordered it will become a mess, here's an example:
Input
<div class="view-content">
<div class="first">content</div>
<div class="second">content</div>
<div class="first">content</div>
</div>
Output
<div class="view-content">
<div class="column">
<div class="first">content</div>
<div class="column">
<div class="second">content</div>
</div>
<div class="first">content</div>
</div>
</div>
You could try whit this:
var arr = $(".view-content div").map(function() { return $(this).attr('class'); }).get();
var results = $.unique(arr);
var i;
for(i = 0; i < results.length; i++){
$('.out').append('<div class="columns"></div>');
$('.'+results[i]).clone().appendTo('.columns:last');
}
alert($('.out').html());
Here an example:
JSFIDDLE