I have a list where need to insert the div for the list item, if use the simple .InsertBefore, will multiply infinitely elements
How can insert the div without duplicating other items?
Example: jsfiddle.net/HJCps
Html Code
<div id="sorter">
<div class="item item-1">
<div class="text">Item 1</div>
<div class="insert">Insert Text 1</div>
</div>
<div class="item item-2">
<div class="text">Item 2</div>
<div class="insert">Insert Text 2</div>
</div>
<div class="item item-3">
<div class="text">Item 3</div>
<div class="insert">Insert Text 3</div>
</div>
</div>
JS Code
$('.insert').insertBefore('.text');
DEMO
$('.item .text').each(function(){
$(this).next('.insert').insertBefore(this);
});
References
.next()
.each
$('.item .text') will find all the elements with class text contained in class item
$('.item .text').each will loop through every matched element one by one.
$(this) refers to the current element.
$(this).next('.insert') will find the next element with the class insert
$(this).next('.insert').insertBefore(this); will insertBefore current element the matched
next element with class insert
your code $('.insert').insertBefore('.text'); will insertBefore all the elements with class insert to all elements with class .text
Something like this might suffice (if I assume your main question right):
$('.insert').each(function() {
$this = $(this);
$this.parent().prepend($this);
});
Fiddle: http://jsfiddle.net/HJCps/1/
Related
I implemented drag and drop functionality using ng2-dnd for my Angular 4 application. I have containers which can be sorted and items within each container which can also be sorted.
I want to restrict items within each containers from being re-assigned to another container.
There is a Container 1 and Container 2. Container 1 has Item1, Item2 and Container 2 has Item3, Item4. I want to restrict Item1 from being dropped into Container 2.
I tried using [allowDrop]="allowDropFunction()" but it did not work. What function can i use to restrict the drop?
You can use dropzones to allow dropping of an element into a target container. For example on the element you want to drag:
<div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dropZones]="['zone1', 'zone2']">
<div class="panel-body">
<div>Drag Me</div>
<div>Zone 1 & 2</div>
</div>
</div>
And then on the target container(s):
<div dnd-droppable class="panel panel-info" [dropZones]="['zone1']" (onDropSuccess)="restrictedDrop1=$event">
<div class="panel-heading">Zone 1</div>
<div class="panel-body">
<div *ngIf="restrictedDrop1">Item was dropped here</div>
</div>
</div>
<div dnd-droppable class="panel panel-warning" [dropZones]="['zone2']" (onDropSuccess)="restrictedDrop2=$event">
<div class="panel-heading">Zone 2</div>
<div class="panel-body">
<div *ngIf="restrictedDrop2">Item was dropped here</div>
</div>
</div>
As long as the element that you want to drag has a matching dropzone in its dropZones property (which can be a string or an array), then the element can be dropped into the target container.
If want to change the dropzones you can do so dynamically using property binding.
I am trying to populate an array in JavaScript using jQuery. I have some <div> elements in a <section> and I only want the <div> elements that are visible (via CSS property display: block) to be added to the array.
HTML:
<section id="container">
<div>shows up 1</div>
<div style="display:none">doesn't show 2</div>
<div>shows up 3</div>
<div style="display:none">doesn't show 4</div>
<div style="display:none">doesn't show 5</div>
<div>shows up 6</div>
<div>shows up 7</div>
<div>shows up 8</div>
<div style="display:none">doesn't show 9</div>
<div>shows up 10</div>
</section>
JavaScript / jQuery
var mainList = $("#container div");
This currently gets ALL <div> elements regardless of their display. Is there some kind of filter I can put onto this call to get only the elements that are visible? It should only return the 6 <div> elements that say "shows up" in them.
Fiddle: http://jsfiddle.net/259chbj4/
Note: For this, I can't use a class that has display: none. I am looking for a solution that only modifies the JavaScript.
You can simply use the :visible selector.
$("#container div:visible");
try:
var mainList = $('#container').find("div :visible");
I've created a test page, where inside each blocks the divs are sortable. But how is it possible, to let the user drag the div out of it's parent, and put inside an another sortable div?
JSFiddle: http://jsfiddle.net/zq8bqufs/
Code:
$( ".sortable, body" ).sortable();
You can use the items option to determine which items inside the element should be sortable.
JSFIDDLE
HTML
<div class="sortable">
<div class="items">
<div class="items">asd</div>
<div class="items">eee</div>
<div class="items">fff</div>
</div>
<div class="items">asd</div>
<div class="items">
<div class="items">vvv</div>
<div class="items">abbsd</div>
<div class="items">mmm</div>
</div>
<div class="items">dsa</div>
</div>
Javascript
$('.sortable').sortable({
items: '.items'
});
You need to use connectWith, more about that here.
I updated (and simplified) your fiddle with that functionality here: http://jsfiddle.net/vrx6r264/
How to determine elements in the visible region of Div?
There are 2 div within main div.
The wrapper div contains many child div with overflow property.
On scrolling the document div i need to find out the visible
children div in the wrapper.
Below is HTML structure
<div class="main">
<div class="wrapper">
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
</div>
<div class="document"></div>
</div>
Is there any possibility for finding the number of visible div in the window?
Try this:
$('wrapperdivselector').find("div:visible");
for length:
$('wrapperdivselector').find("div:visible").length;
Demo
use :visible try this
$('.orginalDiv1>.waprrer div:visible').someCommand()
or
$('.orginalDiv1>.waprrer').find('div:visible').lenght()
I know there are a lot of these threads but none seem to really fit me.
I have 5 dives with text like "this is div1, to div5". These are always gonna be shown.
And i have 5 hidden divs with text belonging to each div, that are gonna show if i click on my shown divs.
If I click div1, i want to show the hidden div1.
Right now I'm using a click function(jQuery) for every div which works but doesn't look very good in code. There has to be a better way. Any advise?
I do NOT want any of the divs to be hyperlinks, which seem to be the solution on a lot of similar threads on here.
EDIT: This is my current code.(can't get jsfiddle to work)
html
<div class="showing_div">
<p>This is a showing div</p>
</div>
<div class="hidden_div" style="display: none;>
<p>This div is hidden</p>
</div>
Jquery
$('showing_div').click(function() {
$('hidden_div').toggle();
})
This are the most used techniques:
target element using .index() and .eq()
<div id="clickables">
<div>CLICK 1</div>
<div>CLICK 2</div>
</div>
<div id="togglables">
<div>text 1</div>
<div>text 2</div>
</div>
$(function(){
$("#clickables div").click(function(){
var idx = $(this).index();
$('#togglables div').eq( idx ).slideToggle();
});
});
Pros: you can keep a really clean HTML markup, no need to assign additional classes or ID
Cons: don't put other elements inside the parents otherwise you might mess the index count
target element using .next() or other jQuery traversal methods
<div id="menu">
<div class="clickable">CLICK 1</div>
<div>text 1</div>
<div class="clickable">CLICK 2</div>
<div>text 2</div>
</div>
$(function(){
$("#menu .clickable").click(function(){
$(this).next('div').slideToggle();
});
});
target specific element using ID
<div class="clickable" id="_1" > CLICK 1 </div>
<div class="clickable" id="_2" > CLICK 2 </div>
<div id="togglable_1"> text 1 </div>
<div id="togglable_2"> text 2 </div>
$(function(){
$(".clickable").click(function(){
$("#togglable"+ this.id).slideToggle();
});
});
Pros: You can target elements unlogically positioned in the DOM
Cons: Verbose HTML; Unflexible and hardly maintainable code.
$('div').click(function() {
var text = $(this).text();
$('#'+text).show();
});
FIDDLE DEMO
As #Roko C. Buljan nicely showed there are many ways of doing it.
This is how I usually do using .data() jQuery function:
<div class="clickable" data-hidden="d1">CLICK 1</div>
<div id="d1" class="hidden">text 1</div>
<div class="clickable" data-hidden="d2">CLICK 2</div>
<div id="d2" class="hidden">text 2</div>
$(".clickable").click(function() {
$("#" + $(this).data("hidden")).toggle();
});
This way it does not matter how I organize my DOM elements. I only need to care to identify the right id in every data-hidden attribute.
Working demo