This is my HTML DOM:
<div id="d1" class="Addable"><span class="yak-bak-nak vok-do-maria"> <p>Goola1</p>
<span>volaa</span></span></div>
<div id="d2" class="Addable"><span class="yak-bak-val vok-do-maria"> <p>Goola2</p></span></div>
<div id="d3" class="Addable"><span class="vok-do-maria yak-bak-nak"> <p>Goola3</p></div>
<div id="d4" class="Addable"><span class="vok-do-maria yak-bak-nak"> <p>Goola4</p></div>
<input type="button" class="Doop" value="Do" />
So I want to remove all divs that class names start with "yak-bak" that means all of the above.
so I try this script:
$('.Doop').click(function () {
$('span[class|="yak-bak"]').parent('div').remove();
});
but just d1 and d2 remove and d3, d4 remain because the yak-bak class come as second also I try this:
$('.Doop').click(function () {
$('span[class^="yak-bak"]').parent('div').remove();
});
So what is your suggestion? where is the problem?
To target elements with multiple classes, where one of then starts by "yak-bak" at the beginning of the attribute class, or at the middle of it, you can use:
JQUERY
$("div[class^='yak-bak'],div[class*=' yak-bak']").parent('div').remove();
This will select elements where the class starts by "yak-bak" and elements that contain a class stated by "yak-bak".
$('div').filter(function() {
return $(this).has('span[class^="yak-bak"]');
}).remove();
DEMO
Or
$('div').filter(function() {
return $(this).has('span[class^="yak-bak"], span[class*=" yak-bak"]');
}).remove();
But First one will enough.
Related
I have this div
<div class="newDiv">
It is generating in loop, something like
<div class="newDiv">
<div class = "innerDiv">
SomeCode
</div>
</div>
<div class="newDiv">
<div class = "innerDiv">
SomeCode
</div>
</div>
<div class="newDiv">
<div class = "innerDiv">
SomeCode
</div>
</div>
Now I want to add another class "BrightDiv" with the div that generated at odd places like
with first and third div.
what should I do to add Class "BrightDiv" along with "newDiv" with every div at odd place?
Try this : You can use :odd or :even to select odd / even elements, but it is depend on the index position and not natural number count. So In your case, you want first and third position div i.e. with index= 0 and 2 which is even by index position and hence use :even.
$('div.newDiv:even').addClass('BrightDiv');
DEMO
You can use filter to select only the odd indexed divs
$(".newDiv").filter(function() {
return $(this).index() % 2 == 1;
}).addClass("BrightDiv");
this will give you a solution $("div:even").addClass("BrightDiv");
Ways to achieve this:
CSS:
.newDiv:nth-child(odd) { /*CSS*/ }
or
.newDiv:nth-child(2n-1) { /*CSS*/ }
jQuery:
$('.newDiv:odd').addClass('BrightDiv');
I have two div's and what I am trying to do is loop through all the divs to check if the div has a class jsn-bootstrap3, I'm also trying to check to see if the div has any other classes, if it doesn't then I'd like to remove the jsn-bootstrap3 div so that the child content is whats left.
<div class="jsn-bootstrap3">
<div class="wrapper">
Div one
</div>
</div>
<div class="jsn-bootstrap3 block">
<div class="wrapper">
Div two
</div>
</div>
$('div').each(function() {
if ($(this).hasClass()) {
console.log($(this));
var class_name = $(this).attr('jsn-bootstrap3');
console.log(class_name);
}
});
jsFiddle
You can try something like
$('div.jsn-bootstrap3').removeClass('jsn-bootstrap3').filter(function () {
return $.trim(this.className.replace('jsn-bootstrap3', '')) == ''
}).contents().unwrap();
Demo: Fiddle
use the class selector to find div's with class jsn-bootstrap3 because we are not goint to do anything with others
use filter() to filter out div's with any other class
use unwrap() with contents() to remove the wrapping div
I'm trying to make jquery parse list of div blocks and add id to each div one by one with numbers like 1,2,3,4,5 and so.
For example, here is the list of div blocks:
<div class="my-blocks">
<div class="start"></div>
<div class="start"></div>
<div class="start"></div>
<div class="start"></div>
</div>
There can be any amount of div blocks with class "start". Final result must be like this:
<div class="my-blocks">
<div id="1" class="start"></div>
<div id="2" class="start"></div>
<div id="3" class="start"></div>
<div id="4" class="start"></div>
</div>
How can I do that? I just don't really understand where I can start to reach this functionality.
You can use .each() to iterate over child divs and then use index+1 to set it as id value.try this:
$('.my-blocks div').each(function(){
$(this).attr('id',$(this).index()+1);
});
Working Demo
You can do:
$('.my-blocks .start').each(function(i) {
$(this).attr('id', i+1);
});
Also note that number is not valid id, you can use div-1, div-2... instead.
Fiddle Demo
You need to add an alphabetical prefix for the ids, Since setting an id as a numeric value is not acceptable in standards below html5. so that your code would achieve backward compatibility.
Try to use the receiver function of .attr(),
$('.my-blocks .start').attr('id', function(i,_) {
return 'id-' + (i+1);
});
DEMO
You must take care that id starting with number is not allowed until html 4. So if you not working on html5 then you should add some prefix to id.
try each():
$('div.start').each(function(index, element){
$(this).attr('id',index+1);
});
Here is working demo.
Using jQuery 'id' property, loop through each block:
$(function(){
$.each($('.start'), function(i,e){
e.id = i+1;
});
});
JSFiddle here http://jsfiddle.net/PU2T4/
And one more (DEMO):
$('.start').attr('id', function() { return $(this).index()+1; });
I'm using the liferay framework and I need to add a JavaScript detected inline height to a very very specific div in my page. The problem is I need to target it going through an unknown number of dynamically added divs with dynamically added classes and IDs. To complicate this even further, the divs are randomly siblings or nested in each other.
Here's what it looks like:
<div class="known-class">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="DIV-I-WANT-TO-TARGET">this is the div i need to Target with my css/javascript</div>
</div>
</div>
</div>
obviously I can't target it simply with
function resize() {
var heights = window.innerHeight;
jQuery('.DIV-I-WANT-TO-TARGET').css('height', heights + "px");
}
resize();
Because that class is present elsewhere, I would rather target it with something like.
jQuery('.known-class .DIV-I-WANT-TO-TARGET')
Which obviously doesn't work because there's a ton of other divs in the middle and my div is not a child of ".known-class"
I was asking myself if there was any jQuery that could help. Something like:
Catch any div with .DIV-I-WANT-TO-TARGET class that is "generically" inside another div that has .known-class
Is this possible? thanks a lot for your help!
Something like this would work:
// this will target the known-class and find all children with DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET');
// this will target the known-class and find the first DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').first();
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:first');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:eq(0)');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').eq(0);
You can try in your css file
.known-class div div div div{}
The last div being the DIV-I-WANT-TO-TARGET
Assuming that you are adding the divs starting from the outer to the inner
Assign an equal name plus a number starting from 1
<div class="known-class">
<div class="unknown dynamicallygenerated" id="dynamicdiv1"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv2">
<div class="unknown dynamicallygenerated" id="dynamicdiv3">
<div class="unknown dynamicallygenerated" id="dynamicdiv4"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv5">
<div class="DIV-I-WANT-TO-TARGET" id="dynamicdiv6"></div>
</div>
</div>
</div>
The use jQuery [.each][1] to loop through all the divs on the document
$( document.body ).click(function() {
$( "div" ).each(function( i ) {
if ( this.style.color !== "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
When you reach the last item in numeric order. (you can use any split function) add the attributes to that div
you need to select last div inside the known-class:
$('.known-class').find('div:last').css('background', 'Red')
OR if you want to select all the .known-class :
$('.known-class').each(function() {$(this).find('div:last').css('background', 'Red')});
Actually your selector works just fine:
$('.known-class .DIV-I-WANT-TO-TARGET')
With a space, selectors will find any descendant.
The search is only limited to direct descendants (immediate children) if you use the > operator.
So $('.known-class > .DIV-I-WANT-TO-TARGET') would not find what you wanted.
I have the following html
<div class="someClass">
Some text
</div>
<div class="someClass">
Some other text
</div>
<div class="add>
<img src="someImage.jpg">
</div>
Now I'd like to append another div after a click on the add image - but only after the last div with the class "someClass".
If I use the following jQuery it will be appended after each someClass element, so multiple times.
$(".add img").live("click", function() {
$(".containerFooter").after("<div class='someClass'>test</div>");
});
Is there a way to only append it after the last div with the someClass attribute?
You are looking for the :last selector:
$(".someClass:last").after("<div class='someClass'>test</div>");
$('.someClass').last()
OR
$('.someClass:last')
will give you last element of class someclass
Use:
$(".someClass").last().append("<div class='someClass'>test</div>");
$(".add img").live("click", function() {
$(".someClass:last").after("<div class='someClass'>test</div>");
});
Sorry, dint read the question completely in first attempt, updated the ans!
Also your html has a typo , its make it
working demo
$(".someClass").last() //-> selects your last div with id = someClass
.after("<div class='someClass'>test</div>");//-> place the html after the selected div
Actual code below
$(".add").live("click", function(){
$(".someClass").last().after("<div class='someClass'>test</div>");
});
There may be an easier way, but a jquery class returns an array of applicable objects. So you can find the last such object, create a new jquery object from it, and then operate on that.
<html><title>JQuery Play</title>
<h1>JQuery Play</h1>
<script src="jquery-1.4.1.js" type="text/javascript" ></script>
<script type="text/javascript">
function add()
{
var x=$(".someClass");
$(x[x.length-1]).after("Added text");
}
</script>
<div class="someClass">
Some text
</div>
<div class="someClass">
Some other text
</div>
<div class="add">
<button onclick="add()">Add</button>
</div>
</html>