Please ignore this question from now. I made a huge mistake. :-)
I have this problem with appending a div (a user div with html in it)from one div to another div. I want to be able to move the "user_u_1"-divs between the containing "regionheader"-divs. Their classes should change also. I have a Fidle prepared.
Right now if a want to append a div from the above div to the second div it appends it to the last one.
the structure is as follows:
<div id="onlineList">
<div class="regionheader" id="one">
<span class="regionspan"><h3>One</h3></span>
<div id="user_u_1" class="One" name="Joe">1</div>
<div id="user_u_2" class="One" name="Joe">2</div>
<div id="user_u_3" class="One" name="Joe">3</div>
</div>
<div class="regionheader" id="two">
<span class="regionspan"><h3>Two</h3></span>
<div id="user_u_4" class="Two" name="Joe">4</div>
<div id="user_u_5" class="Two" name="Joe">5</div>
<div id="user_u_6" class="Two" name="Joe">6</div>
</div>
<div class="regionheader" id="three">
<span class="regionspan"><h3>three</h3></span>
<div id="user_u_7" class="three" name="Joe">7</div>
<div id="user_u_8" class="three" name="Joe">8</div>
<div id="user_u_8" class="three" name="Joe">9</div>
</div>
</div>
You have a typo in your HTML.
The offending line:
<div id="user_u_4" class="Two" name="Joe" >4<html/div>
Should be:
<div id="user_u_4" class="Two" name="Joe" >4</div>
Updated fiddle that works.
Related
I'm trying to select an element by clicking on its grand grand grand child. But I can't find the way without using parent().parent() etc.
General HTML
I have an HTML divided in pages
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
Inner page HTML
<div class="page">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element"></div>
</div>
</div>
</div>
</div>
When clicking clicked_element I want to copy to_move class element to previous page.
The inner structure of the page element is not always the same, that's why I want to avoid using multiple parent().
I tried
$(this).parentsUntil('.page').html()
But I get only clicked_element parent.
$(this).parents('.page').html()
With this parents() option I get undefined.
$(this).closest('.page').html()
Again I get undefined.
Any clues welcome.
You could very well use closest :
$('body').on('click', '.clicked_element', function() {
$(this).closest('.page').clone().appendTo('body')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div class="page">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element">Click me to copy my whole class</div>
</div>
</div>
</div>
</div>
$(this).parents('.page') should work. I'm guessing you're binding the the wrong event. The key to this answer is not the selector ($(this).parents...) but the event binding ($(".clicked_element").click...). In your case, I guess that this is not the element you were looking for because the event binding is probably wrong.
$(".clicked_element").click(function() {
alert($(this).parents('.page').attr('printme'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="page" printme="You found me!">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element" style="width: 250px; height:250px; background-color: blue">
</div>
</div>
</div>
</div>
</div>
First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>
You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>
I have a list of items that I'm generating with ng-repeat, that looks something like this
...
<div class="a">
<div>
<div class="b"></div>
</div>
</div>
<div class="a">
<div>
<div class="b"></div>
</div>
</div>
...
I want to move all divs with class="b" outside their parent div with class="a", something like this.
...
<div class="a">
<div>
</div>
</div>
<div class="b"></div>
<div class="a">
<div>
</div>
</div>
<div class="b"></div>
...
I'm currently trying something with jQuery
$(".b").insertAfter(".a")
It just ends up generating a bunch of divs with class="b" for every div with class="a"
Use .each() to traverse each .b
$(".b").each(function(){
$(this).insertAfter($(this).closest(".a"))
})
In your code
$(".b").insertAfter(".a")
the $(".b") finds all the divs with class = "b" in the DOM and inserts it after each .a
I am trying to get hold of the last child of class full-width. It's a looping text with border-bottom. All I want is that the last child doesn't get the border. To make sure it works in IE8 too, I am doing it through JQuery:-
Somehow it doesn't work.
JQuery
$(".solutions-section .field-items .field-item div:last-child").css("border-bottom","none");
HTML
<div class="full-width info-block solutions-section">
<div class="field field-name-field-solutions-area field-type-text-long field-label-hidden">
<div class="field-items">
<div class="field-item even" style="border-bottom-style: none;"><h2>A Para</h2>
<div class="full-width solid-block">
<div class="alignleft onethird-width ">
<img border="0" src="sites/all/themes/ourbrand/images/image.png" width="120">
</div>
<div class="alignleft qtr-width small-text dark-grey">
Who is it for? All Text</div>
<div class="clear"> </div>
</div>
<div class="full-width solid-block">
<div class="alignleft onethird-width ">
<img border="0" src="sites/all/themes/ourbrand/images/image.png" width="120">
</div>
<div class="alignleft qtr-width small-text dark-grey">
Who is it for? All Text</div>
<div class="clear"> </div>
</div>
</div></div></div></div>
I think ur selection not only select the child div only. It will take all the div contain in item-field class.
just add '>' before div maybe help.
$(".solutions-section .field-items .field-item > div:last").css("border-bottom","none")
example here http://jsfiddle.net/w6s6puLu/
If I get your problem correctly then you can use :
$(".solutions-section .field-items .field-item div.full-width:last-child").css("border", "2px solid green");
Demo
Just see if it helps!
I'm trying to do a show / hide using css only, is that possible or does some type of jscript is needed? this is what i'm trying to do, when anyone one of the 4 div's are clicked the div for it below is shown.
<div class="span3">
<img src="an1.jpg" class="img-rounded" />
<h3>AN1<br />1234</h3>
</div>
<div class="span3">
<img src="an2.jpg" class="img-rounded" />
<h3>AN2<br />1234</h3>
</div>
<div class="span3">
<img src="an3.jpg" class="img-rounded" />
<h3>AN3<br />1234</h3>
</div>
<div class="span3">
<img src="an4.jpg" class="img-rounded" />
<h3>AN4<br />1234</h3>
</div>
Show div when div is click:
<div style="display: none;"> this is AN1 </div>
<div style="display: none;"> this is AN2 </div>
<div style="display: none;"> this is AN3 </div>
<div style="display: none;"> this is AN4 </div>
You can use a hidden input that can be toggled that corresponds to the label in the click area.
<div class="span3">
<label for="an1">
<img src="an1.jpg" class="img-rounded" />
</label>
<h3><label for="an1">AN1<br />1234</label></h3>
</div>
...
<input id="an1" type=checkbox><div style="display: none;"> this is AN1 </div>
Then in your CSS:
[type=checkbox] {
display: none;
}
:checked + div {
display: block !important;
}
I would also stear clear of style and just use the stylesheet.
http://jsfiddle.net/ExplosionPIlls/ZyAXA/1/
In most browsers you should simply use the href attribute of the a elements and an id for the element to show:
Div one
Div two
Div three
Div four
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
Coupled with the CSS:
#content > div {
display: none;
}
#content > div:target {
display: block;
}
JS Fiddle demo.
In the HTML the wrapper div (#content) isn't necessary, it's simply to make it easier to specifically target those elements it contains (you could, of course, simply use a class instead).
To add hiding functionality (to hide all, rather than just hide the sibling divs when showing another), unfortunately requires a link to trigger a hash-change (in order to stop the :target selector matching the divs), which in turn requires a link (either in each of the divs to show or elsewhere in the document, either linking elswhere (as follows):
<ul id="andHideAgain">
<li>Div one</li>
<li>Div two</li>
<li>Div three</li>
<li>Div four</li>
</ul>
<div id="content">
<div id="div1">This is div one <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div2">This is div two <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div3">This is div three <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div4">This is div four <a class="hide" href="#andHideAgain">hide</a></div>
</div>
JS Fiddle demo (link in each div).
Or the simple use of just a hash:
Div one
Div two
Div three
Div four
hide
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
JS Fiddle demo (using a single a, and an 'empty' hash).
this is how i solve show hide problem with just
here is my div with its class declared
<div class='loading'> </div>
and here is the javascript that
$('.loading').hide();
and
$('.loading').css("display", "block");