I have multiple div elements having same class name (listing_class). What I need is to get href value of each anchor tag in all div elements respectively.
var length = $(".listing_class").length;
for (var i = 0; i < length; i++) {
$(".listing_class").each(function() {
console.log($(this).children('a').attr('href'));
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listing_class " style="display: none;">
All Listings
For Sale (0)
For Rent (0)
</div>
<div class="listing_class " style="display: none;">
a
b
c
</div>
<div class="listing_class " style="display: none;">
a
b
c
</div>
<div class="listing_class " style="display: none;">
VV
CC
AQ
</div>
<div class="listing_class " style="display: none;">
VV
CC
AQ
</div>
Problem is, it returns anchor values of first div only and doesn't loop further.
Thanks in advance.
Basically a better solution would be to find all the a elements under .list_class class is if you find with the following jQuery selector $('.listing_class a') all the a tags. Then this can be used to iterate through all the necessary items and get the href attribute of each elements.
Maybe you can try the following:
$('.listing_class a').each(function(lc) {
console.log($(this).attr('href'));
});
<div class="listing_class " style="display: none;">
All Listings
For Sale (0)
For Rent (0)
</div>
<div class="listing_class " style="display: none;">
a
b
c
</div>
<div class="listing_class " style="display: none;">
a
b
c
</div>
<div class="listing_class " style="display: none;">
<a href="?section=WW&status=p" > VV</a>
<a href="?section=WW&status=p" > CC</a>
<a href="?section=WW&status=p" > AQ</a>
</div>
<div class="listing_class " style="display: none;">
VV
CC
AQ
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
I hope this helps!
Related
I am using Dragula with Angular7 and dragula is not updating the list sorting even after drag and drop event successfully emitted.
Here, is my code :
dragula.view.html
<div class="portlet-content doc-portlet">
<div dragula="one-bag" [(dragulaModel)]="fileList" (dragulaModelChange)="fileList = $event">
<div class="elementline " *ngFor="let item of fileList">
<div class="extra-pages-portlet-content">
<div class="thumb-box left-col">
<a href="{{item.file_url}}{{item.file}}" target="_blank">
<img [src]="item.complete_url" height="100%" width="100%">
</a>
</div>
<div class="right-col thumb-info">
<div class="icon-row">
<div class="icon" style="float:right;">
<span style="cursor:grabbing; float:right;">
<img src="../../assets/images/move.png" height="16" width="16" class="iconDelete-update">
</span>
</div>
</div>
<div class="text-and-input-field">
<span class="text-detail-portlet" style="float:left;">Seconden: </span>
<div class="input-field">
<input type="text" [(ngModel)]="item.slide_duration" class="text-right-Detail-user" placeholder="-" style="width:100%; text-align:right;">
</div>
</div>
</div>
</div>
</div>
</div>
dragula.component.ts
dragulaService.setOptions('one-bag', {})
dragulaService.drop.subscribe((value:any) => {
var counter = 0;
for(var j=0; j < this.fileList.length;j++) {
this.fileList[j].narrowcasting_slide_order = counter;
counter++;
}
});
I am dragging and dropping the items in the list, but dragula is not updating the list sorting order.
Can somebody provide me any solution on this?
i would like to know how i can increment class on click my class="item" i want to change on click every time to item1 item2 item3 exc how can i do this? this is what i want to incrament
<div href="#" class="item" data-bind="draggable:true,droppable:true">
<div class="item">
<textarea data-bind="value:textContent1" Placeholder="Type text to append"></textarea>
</div>
<button data-bind="click:addNew">Generate New Div</button>
<div href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">X</span>
<br/>
<br/>
<center>
<span class="text i" data-bind="text:$data"></span><input class="edit_text"/></center>
</div>
HTML
<button onclick="addNew()">Generate New Div</button>
<div id="my_div" class="item1"></div>
JavaScript
var i = 1;
function addNew() {
document.getElementById("my_div").classList.remove("item" + i++);
document.getElementById("my_div").classList.add("item" + i);
}
This will increment the class name each time the button is clicked.
I need to count hidden elements regardless of parent visibility.
I have this code:
<div id="parent-1">
<div class="item" style="display: none;"></div>
<div class="item" style="display: none;"></div>
<div class="item"></div>
<div class="item" style="display: none;"></div>
</div>
<script>
var hidden_items = $('#parent-1').find('.item:hidden').length;
console.log (hidden_items);
</script>
In this example I get 3 items, so is correct.
But with this code:
<div id="parent-2" style="display: none;">
<div class="item" style="display: none;">
<div class="item" style="display: none;">
<div class="item">
<div class="item" style="display: none;">
</div>
<script>
var hidden_items = $('#parent-2').find('.item:hidden').length;
console.log (hidden_items);
</script>
I get 4 elements! because parent is a hidden element, but I need to get 3.
Any ideas?
You can use filter function to filter out elements that have display property set as none:
var hidden_items = $('#parent-2 .item').filter(function(){
return $(this).css('display') == "none"
}).length;
Working Snippet:
$(function(){
var hidden_items = $('#parent-2 .item').filter(function(){
return $(this).css('display') == "none"
}).length;
alert (hidden_items);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-2" style="display: none;">
<div class="item" style="display: none;">
<div class="item" style="display: none;">
<div class="item">
<div class="item" style="display: none;">
</div>
That is because, When a parent element is hidden the children elements of it will also be hidden. That is the natural behavior. If you still want to get the elements regardless of its parent display property then use .filter with its callBack function.
var hidden_items = $('#parent-2 .item').filter(function(){
return this.style.display == "none"
}).length;
DEMO
This site has saved me a milion times, but now i am trying to make something similar to the header section of this site, and can't quite get it to work. I would like someone to help me with the following:
Here is my example code :
<div class="container">
<div class="row" style="padding-top: 50px;">
<div class="col-md-4">
<div id="first" class="cube color1"></div>
<div id="second" class="cube color3" style="display: none;"></div>
</div>
<div class="col-md-4">
<div id="first" class="cube color2"></div>
<div id="second" class="cube color1" style="display: none;"></div>
</div>
<div class="col-md-4">
<div id="first" class="cube color3"></div>
<div id="second" class="cube color2" style="display: none;"></div>
</div>
</div>
<div class="row" style="padding-top: 50px;">
<div class="col-md-4">
<div id="first" class="cube color3"></div>
<div id="second" class="cube color2" style="display: none;"></div>
</div>
<div class="col-md-4">
<div id="first" class="cube color2"></div>
<div id="second" class="cube color1" style="display: none;"></div>
</div>
<div class="col-md-4">
<div id="first" class="cube color1"></div>
<div id="second" class="cube color3" style="display: none;"></div>
</div>
</div>
</div>
The javascript :
<script>
setInterval(hide, 2000);
function switchDivs()
{
var first = document.getElementById("first");
var second = document.getElementById("second");
}
function hide() {
document.getElementById("first").style.display="none";
document.getElementById("second").style.display="block";
}
function show() {
document.getElementById("first").style.display="block";
document.getElementById("second").style.display="none";
}
</script>
link to jsfiddle
I dont understand first why it doesnt change all the "first" divs into "second", it changes only the first div. Than the next question is how to make that action repeat over time, preferably more like random timer for each one of the 6 positions/boxes.
Shortly: I need divs with id="first" to be swapped with divs with id="second" , after like 5-10 seconds delay after loading the page. Than after the same delay, i need them to switch back to showing only divs with id="first" and so on... (something like setInterval function).
setInterval(function() { $(".color-blocks .col-md-4").each(function() { $(this).children().toggle(); }); }, 2000);
a simple line of code could be helpful, and in a simpler way.
working fiddle : https://jsfiddle.net/65k788u6/3/
while you use ids, those should be unique, so instead use toggle() in order to make it look simpler.
sorry, I don't have 50 rep to leave a comment. Is the problem is that you have multiple elements with the same ID? getElementById() seems to be returning the first instance that's true and not further with the same ID. I would recommend using getelementsbyclassname() and using classes instead of ID's to describe groups of elements. Updated the fiddle to show it done this way. version 4.
Your HTML is invalid. The ID attribute on any element should always be unique within the context of the entire page.
Instead of .getElementById, which selects only one item (and only by its ID attribute) you can use .querySelectorAll to get all elements that match a given CSS query selector (or .querySelector to get a single element).
I recommend using setTimeout instead of setInterval as a general best practice.
var rows = document.querySelectorAll(".col-md-4");
var indices = getIndices(rows);
setTimeout(flipRows, 5000);
function getIndices() {
var arr = [];
for (var i = 0, len = rows.length; i < len; i++) {
arr.push(i);
}
return arr;
}
function flipRows() {
if (indices.length == 0) {
indices = getIndices();
}
var index = Math.random() * indices.length >>> 0;
var randomRow = rows[indices[index]];
indices.splice(index, 1);
flipRow(randomRow);
setTimeout(flipRows, 5000); // run again in 5 seconds
}
function flipRow(row) {
var first = row.querySelector(".first");
var second = row.querySelector(".second");
if (first.style.display === "none") {
first.style.display = "block";
second.style.display = "none";
} else {
first.style.display = "none";
second.style.display = "block";
}
}
.color1 { background-color: pink;}
.color2 { background-color: lightblue;}
.color3 { background-color: lightgreen;}
<div class="container">
<div class="row" style="padding-top: 50px;">
<div class="col-md-4">
<div class="first cube color1">first</div>
<div class="second cube color3" style="display: none;">second</div>
</div>
<div class="col-md-4">
<div class="first cube color2">first</div>
<div class="second cube color1" style="display: none;">second</div>
</div>
<div class="col-md-4">
<div class="first cube color3">first</div>
<div class="second cube color2" style="display: none;">second</div>
</div>
</div>
<div class="row" style="padding-top: 50px;">
<div class="col-md-4">
<div class="first cube color3">first</div>
<div class="second cube color2" style="display: none;">second</div>
</div>
<div class="col-md-4">
<div class="first cube color2">first</div>
<div class="second cube color1" style="display: none;">second</div>
</div>
<div class="col-md-4">
<div class="first cube color1">first</div>
<div class="second cube color3" style="display: none;">second</div>
</div>
</div>
</div>
I've succeeded in getting divs to show/hide but now for some reason, all other links on the page stop working unless if I open them in a new tab. How can I get this fixed?
$(document).ready(function () {
$("#div9").show("slow").siblings().hide("slow");
$('a').click(function () {
event.preventDefault();
var divname = this.name;
$("#" + divname).show("slow").siblings().hide("slow");
});
$('#seeAll').click(function() {
$('#div2').show("slow")
$('#div3').show("slow")
$('#div4').show("slow")
$('#div5').show("slow")
$('#div7').show("slow")
$('#div8').show("slow")
$('#div9').hide("slow")
})
});
<a class="people-letters" href="#" name="div2">A</a> <a class="people-letters" href="#" name="div3">B</a> <a class="people-letters" href="#" name="div4">C</a> <a class="people-letters" href="#" name="div5">D</a> E F G H I J K L M N O P Q R <a class="people-letters" href="#" name="div7">S</a> T U V <a class="people-letters" href="#" name="div8">W</a> X Y Z <a id="seeAll" class="people-letters" href="#">See All</a>
<div>
<div id="div2" style="display: none;">
div2
</div>
<div id="div3" style="display: none;">
div3
</div>
<div id="div4" style="display: none;">
div4
</div>
<div id="div5" style="display: none;">
div5
</div>
<div id="div7" style="display: none;">
div7
</div>
<div id="div8" style="display: none;">
div8
</div>
<div id="div9" style="display: none;">
div9
</div>
</div>
Sample Link
EDIT:
You have bound your click event to ALL link elements by specifying 'a' as your selector. in order to bind it only to that specific link you can use your class that you've specified for the links that hide and show the div elements.
$('a.people-letters').click(function (event) {
event.preventDefault();
var divname = this.name;
$("#" + divname).show("slow").siblings().hide("slow");
});