I have a problem selecting the second .prev()
HTML:
<div></div> <- Set margin to 0;
<div></div>
<div id="interactive"></div>
jQuery:
$("#interactive").prev().prev().css("margin", "0");
It's going to give CSS to both of them, i want the changes only apply for the first div.
Best Regards,
You can check this working fiddle:
http://jsfiddle.net/adp8qxyb/
<div id="interactive"></didv>
The Problem might be some syntax/markup errors in your HTML. Be sure every tag is well closed
HTML
<div id="target"></div>
<div></div>
<div id="interactive"></div>
jQuery
$("#target").css("margin", "0");
This is better practice than prev().prev() and efficient
Html:
<div></div>
<div></div>
<div id="interactive"></div>
JavaScript:
var f;
for( f=0;f<document.getElementsByTagName("div").length;f++){
var div = document.getElementsByTagName("div")[f];
if(div===document.getElementById("interactive")){
document.getElementsByTagName("div")[f-2].style.margin="0";
}
}
I have tested it!
It works also if there are more elements before the 3 divs!
Related
I want to change a style of a div but the div i'm trying to change doesn't have an id or class. Can someone please help?
This is the div that I want to change:
<div style="display:inline-block">
I expect the result to be something like:
$('#ID/.Class').css({'display': 'block'});
The result I want to get is:
<div style="display:block">
If you could help me that would be great!
If it is impossible by JQuery please tell me how to do it by Javascript (If you tell me how to do it by Javascript please tell me the full javascript so that I could paste it into my code) Thanks!
This could easily be done in jQuery by targeting the div's style attribute, to see that it has the value of inline-block anywhere in it via *. If only one of these divs is needed, you also use first() followed by css() to change the style.
$("div[style*='inline-block']").first().css('display', 'block');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: inline-block;">Example div</div>
The native JS solution is almost identical, only you use querySelector():
document.querySelector("div[style*='inline-block']").style.display = 'block';
<div style="display: inline-block;">Example div</div>
Here is the Jquery version to filter the div tags that has the inline style of display:inline-block and then change its CSS to display:block. You can use Inspect element to check the output. Hope it helps.
$("div").filter(function(){
return ($(this).css('display') == 'inline-block');
}).css("display","block");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:inline-block">Text</div>
Could not find this anywhere
Say I have 5 divs like so
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
my jquery selector
$('.wrapper div:nth-child(3)')
This is great but how do I select all the divs besides nth-child(3)?
I know I can combine two filters as follow:
$('.wrapper div:gt(3)')
$('.wrapper div:lt(3)')
and I tried chainning :nth-child():not() it returns the nth-child
Is there a better way of doing it?
This will do it:
$('.wrapper > div:not(:nth-child(3))')
The > is necessary if you actually want only the direct children and not all matching div descendants that are not the third child of their immediate parent element.
I am trying to write a simple script which will be able to read/display every single DIV one by one (without interfering with the other divs inside). Unfortunately, my idea didn't work as I thought it will. I achieved what I aimed for with .children().remove().each but found out that it skips the first div and deletes all the others inside. I will be really grateful if someone can help me or point what I am doing wrong.
$(function Testing(){
$("div").each(function(){
var Div = $(this).text();
alert(Div);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Alpha">
Alpha
<div id="Bravo">
Bravo
<div id="Charlie">
Charlie
<div id="Delta">
Delta
</div>
</div>
</div>
</div>
</body>
It looks like you want to have the nested structure. If that is the case you can do it at least a couple of ways:
$(function Testing() {
$("#container div").each(function() {
// my variation on this answer: http://stackoverflow.com/a/32170000/1544886
var Div = $(this).contents().not($(this).children()).text();
/* or another way: http://stackoverflow.com/a/33592275/1544886
var Div = $(this)
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
*/
alert(Div);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="Alpha">
Alpha
<div id="Bravo">
Bravo
<div id="Charlie">
Charlie
<div id="Delta">
Delta
</div>
</div>
</div>
</div>
</div>
I added div#container ONLY because I didn't like the extra alerts generated from the divs created by having a code snippet. It's not necessary to do this in your code... you can ignore it and just use your selector $("div").
To get your desired output, you need to change your HTML so that each div only contains the text that you want it to output.
You'll notice two blank alerts when running this code snippet. This is because there are additional divs placed in the code snippet by SO (hidden). These extra alerts would not show in your local script.
$(function Testing() {
$("div").each(function() {
var div_text = $(this).text();
alert(div_text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Alpha">Alpha</div>
<div id="Bravo">Bravo</div>
<div id="Charlie">Charlie</div>
<div id="Delta">Delta</div>
</body>
Also, use descriptive variables. It is best to start this practice now (since you're learning) so you don't form bad habits. I changed Div to div_text as an example.
I want to move all the text(html content) after a div(which is again under a div) to another tag.
For example, if i have a page like below, i want to move everything after div2 to body:
<body>
<div id=div1>
<div id=div2></div>
<div id=div3></div>
<script>blah</script>
and much more
</div>
</body>
to
<body>
<div id=div1>
<div id=div2></div>
</div>
<div id=div3></div>
<script>blah</script>
and much more
</body>
How can i do this?
Using
$('#div').appendTo('body');
only moves that div.
You can achieve this using jQuery.
var elems = $("#div2").nextAll();
$('body').append(elems );
jsfiddle
As of my tries, response above isn't correct because it doesn't move the text nodes.
Try this, hope it's what you are looking for:
var $div = $("#div2"), $con = $div.parent().contents();
$con.slice($con.index($div)+1).appendTo("body");
jsfiddle
I'm trying to remove all the sibling elements after a particular div, lets say the div tag with id = id8.
<form>
<div id="id5">something ...<div>
<div id="id8">something ...<div>
<div id="id3">something ...<div>
<div id="id97">something ...<div>
<div id="id7">something ...<div>
...
<div id="idn">some text ...<div>
</form>
To do that I use the following code in jquery.
$("#id8 ~ div").remove();
It works fine in Firefox, but It doesn't work in IE7.
Is there an alternative way to archieve this, using jquery and just giving the tag id from the element I want to start removing the elements?
Thanks
Thanks everybody for your help
I end up with this solution based on the accepted answer
function removeAfter(el,tag){
element = $('#'+el);
var aElements = $(tag,element.parent());
var index = (aElements.index(element));
for(i=(index+1);i<aElements.length;i++) {
$('#'+$(aElements.get(i)).attr('id')).remove();
}
}
just call
removeAfter('id8', 'div')
Two things!
1) Close your <div> tags! It should look like this:
<form>
<div id="id5">something ...</div>
<div id="id8">something ...</div>
<div id="id3">something ...</div>
<div id="id97">something ...</div>
<div id="id7">something ...</div>
<div id="idn">some text ...</div>
</form>
2) The ~ operator only matches siblings that follow the matched element (ie it will match id3, id97, id7 and idn, but not id5). To match every sibling, including id5, you do this:
$("#id8").siblings("div").remove();
That should leave you with just id8. I tested this in Firefox 3.5.5 and IE7.0something. Hope that helps!
Three steps here:
Find the index number of the element we've clicked, with respect to its parent.
Loop through all the div elements contained within this parent, starting after the one we just found
Delete each div found
$(document).ready(function(){
$('#parent').children().click(function(){
var index = ($('div',$(this).parent()).index(this));
for(i=(index+1);i<$('div',$(this).parent()).length;i++){
$($('div',$(this).parent()).get(i)).hide();
}
});
});
This will work on this HTML
<div id="parent">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="c5">c5</div>
</div>
Comment here if you've got any more problems on the matter!
P.S. An application of this solution exact to your request is the following
function removeAfter(el){
element = $('#'+el);
var index = ($('*',element.parent()).index(element));
for(i=(index+1);i<$('*', element .parent()).length;i++){
$($('*', element.parent()).get(i)).hide();
}
};
EDIT:
Editing the answer below to add what should be a fix for the problem:
$("#id8").nextAll().remove();
END EDIT.
Ok. This appears to be an interesting bug - initial testing seems to indicate it's a jquery bug although I haven't found any specific mention of it anywhere.
The bug seems to be that if your initial selector tag is the same type as its siblings then it will fail to return any siblings in IE7.
I tested it using the jQuery example code for the selector itself and was able to duplicate your problem in IE8 emulating IE7.
If you check the jquery example code I'll stick below you can see that the actual element they're using as the initial selector is a span and the sibling elements are all divs whcih seems to me to indicate they know about this bug and haven't documented it, which is both cunning and shitty.
<script>
$(document).ready(function(){
$("#prev ~ div").css("border", "3px groove blue");
});
</script>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
Change the #prev span to a div and you'll get the same failure as you're getting currently. I'd submit a bug with the jquery team.