I have a little problem here, as jQuery seems to be 'too smart'.
In my HTML-code, I want to insert this string into a div-container:
</div><div class="something">
As you see, first is the closing-tag, second is the opening tag.
That is because I want to cut one big DIV into pieces.
I tried it with jQuery, which I prefer:
$(this).children('.abc').each(function(j){
if( (j+1) % 3 == 0){
$(this).after('</div><div class="abc">');
}
});
I am counting sub-containers and after each three containers I want to cut the parenting container.
Unfortunately jQuery ignores the </div> and puts a closing tag to the <div>. So the result is <div class="abc"></div>.
How do I tell jQuery to insert the string, that I want without any own semi-intelligent parsing?
If you want to cut one div into two, you may be better off replacing one with two rather than trying to be smart and inserting a closing </div> and an opening <div>.
$('.one').replaceWith('<div class="two">two</div><div class="three">three</div>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">I am one</div>
You can, of course, transfer any content to the new div's as appropriate.
Working Fiddle
Although what you're doing is logically correct, it is not always preferred in terms of implementation. You have to look around for certain ethos that are defined by library.
In case of jQuery that ethos is defined by the .wrapAll API.
You can try something like this.
If I understand your question correctly, what you're trying to do is convert
<div class="abc">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Into
<div class="abc">
<div class="something">
<div></div>
<div></div>
<div></div>
</div>
<div class="something">
<div></div>
<div></div>
<div></div>
</div>
</div>
Wrap it like
var divs = $("div.abc > div");
for(var i = 0; i < divs.length; i+=3) {
divs.slice(i, i+3).wrapAll("<div class='something'></div>");
}
I am not sure about this, but just try it like
$(this).children('.abc').each(function(j){
if( (j+1) % 3 == 0){
$(this).after('</div>');
$(this).after('<div class="abc">');
}
});
or vice versa
Related
My HTML code structure like this
<div id="content">
<div> //start
<div id="title"></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div> //end
<div>
<div></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div>
.....more div like above....
</div>
I want to use a piece of JQuery code to hide everything except the "div" has id="title"(keep the code from //start to //end).
Now, my JQuery code is:
$("div:not(:has(#title))").hide();
It shows "div id="title"""div"", but it also hide the several "div" after "div id="title"""div"". Again, I want to keep the code from //start to //end. Please help me, thanks.
If your goal is to hide the siblings of the div that contains the #title element, then:
$("#title").parent().siblings().hide();
$("#title") - find the element with the id "title"
.parent() - go up to its parent
.siblings() - get the siblings of the parent
.hide() - hide them
So let's say I have this scenario of articles:
I have a photo in the left and the content of the article right after the image.
In the content area I have a reservation button.
If the article is reserved, then it will be displayed a small image over the bottom of the photo (transparent written "Reserved").
This stuff is all done.
What I want to do next is to remove the hyperlink-button "Reserve" from the article if it's reserved. Should look like this:
-NormalIMG- [Reservation-Button]
-NormalIMG- [Reservation-Button]
-ReservedIMG- *
-NormalIMG- [Reservation-Button]
-ReservedIMG- *
-NormalIMG- [Reservation-Button]
and so on.
*here's no reservation button
So it's something like this:
Reserve
<!-- reserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"><img src="reserved.jpg" /></div>
<div class="content">
Reserve
</div>
</div>
<!-- reserved article //-->
<!-- unreserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"></div>
<div class="content">
Reserve
</div>
</div>
<!-- unreserved article //-->
<!-- reserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"><img src="reserved.jpg" /></div>
<div class="content">
Reserve
</div>
</div>
<!-- reserved article //-->
I tried with jQuery something like this:
if(!($('.image-reserved').find(img))) {
$('.reserveLink').addCSS('display', 'none');
}
But I got all the "Reserve" links removed...
I realized that I need something that should apply that CSS attribute only after the element 'img' was found.
After that, it should continue the search and apply it when it has to.
I lost all my day trying to figure out a way to get out of this by implementing different structures (using find, has, next, etc.) similar to the above example... but no success.
I'm posting here as a last resort, my hope is completely lost to something that seemed to be so easy to implement...
IMPORTANT NOTE: I know the structure looks weird and it might be really hard for what I want to be implemented, but I am not allowed to modify any code that was written already.
You shoud iterate over each image-reserved :
// For each image reserved
$(".image-reserved").each(function(){
// Count the children
var count = $(this).children("img").length;
// If there's a child (The reserved img), then we delete the following links
if(count > 0){
$(this).next().children(".reserveLink").hide();
}
});
$('.image-reserved').next().hide()
I'd suggest:
$('.content').filter(function(){
return $(this).prev('div.image-reserved').find('img').length;
}).find('a').remove();
JS Fiddle demo.
References:
filter().
find().
prev().
remove().
$('div.image-reserved:not(:empty)+.content a.reserveLink') will find all .image-reserved divs that have content, and select the .reserveLink links in the .content element after them.
So let's say have the following content structure:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo"></div>
<div class="contentThree"></div>
<div class="contentFour"></div>
</div>
What I want to achieve on page load, is for the width of the 1st div (contentOne) to be picked up and increment the width of the other 3 divs by 50px. In the end I want the following:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo" style="width:100px"></div>
<div class="contentThree" style="width:150px"></div>
<div class="contentFour" style="width:200px"></div>
</div>
First prize would be for this to be possibly using CSS3 Calc. If not JS will be a close 1st princess.
Thanks
Right now, CSS has no preceding-sibling selector (although there is a "following sibling" selector, for some reason), so a pure CSS solution isn't yet possible. jQuery would be something like this:
$('div:not(:first)').each(function()
{
$(this).width($(this).prev().width() + 50);
});
Use Jquery to this . The code would be something like this. Please make the changes appropriate this is just a demo code.
var widthOfFirstChild=$('.wrapper').eq(1).width();
$('.width div').each(
function(){
$(this).attr('style':widthOfFirstChild+50);
widthOfFirstChild=+50
});
To select the specific <div> (for e.g the <div> commented as <!-- This one!)Please note all of <..> elements are unknown elements at all levels, BUT NO <div>'s.
<div></div>
<div class="class1">
<..>
<..></..>
<div></div>
<div></div>
<div> <!-- 3rd-child div, of its parent -->
<..></..>
<..>
<div></div>
<div></div> <!-- This one! The 2nd-child div, of its parent -->
<div></div>
</..>
</div>
<div></div>
</..>
</div>
In this scenario, the only logic i can think is:
ONLY the element type as <div>s and the nth numbers (among siblings) are KNOWN.
Middle elements are unknowns. Can be <p> or <table> or <ul> whatever, but not <div>s again.
Levels are unknown.
So:
The target <div> is recursively located under the div#class1
It is the 2nd <div> inside the 3rd <div> of div#class1
How can i get it?
Sorry everyone, i have my own answer already:
$("div.class1 div:eq(2) div:eq(1)").html()
I have a group of nested divs
<div id="myDivs">
<div>
<div>
<div></div>
</div>
<div></div>
<div></div>
</div>
</div>
Using jquery, how do I select the div that is immediately beneathe myDivs, but NONE of it's children?
thnx!
Use the child selector: $('#myDivs > div')
Since the first element is an id selector, the following way will faster. But only noticed the difference in a very complex document.
$('#myDivs').find('div')