I have been trying to find out how to do a sitewide search for an elements index of a certain class. Doesn't have to sitewide, but i has to be usuable for an ancestor div.
My markup is the following:
<div class="custom-woo-gallery">
<div class="row">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
<div class="row">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
<div class="row">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
<div class="row">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
<div class="row">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
</div>
Basically a .gallery-item element is clicked and i need to find out how many .gallery-item elements preceeds it in the common ancestor .custom-woo-gallery.
I have the following code, which is functional. But I'm guessing theres more simple way to do this. I just can't seem to find anything on google other than index() and eq() which only seems to work inside the same parent div.
function getPrev(){
var count = 0;
$(clicked).parent().prevUntil().each(function(){
count = count + $(this).children().length;
})
var self = $(clicked).prevUntil().length;
return count + self;
}
Try this solution. If you have only one custom-woo-gallery, you can get the index of the current clicked gallery-item's index via jQuery#index. And you can find how many how many .gallery-item elements precedes it.
Actually the index of the clicked div is the number of his previous .gallery-items.
const galleryItems = $('.gallery-item');
$('.gallery-item').on('click', function(){
console.log(galleryItems.index($(this)));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-woo-gallery">
<div class="row">
<div class="gallery-item">1</div>
<div class="gallery-item">2</div>
<div class="gallery-item">3</div>
</div>
<div class="row">
<div class="gallery-item">4</div>
<div class="gallery-item">5</div>
<div class="gallery-item">6</div>
</div>
<div class="row">
<div class="gallery-item">7</div>
<div class="gallery-item">8</div>
<div class="gallery-item">9</div>
</div>
<div class="row">
<div class="gallery-item">10</div>
<div class="gallery-item">11</div>
<div class="gallery-item">12</div>
</div>
<div class="row">
<div class="gallery-item">13</div>
<div class="gallery-item">14</div>
<div class="gallery-item">15</div>
</div>
</div>
Related
Sample:
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>
When i click "column_expand_list" i need to find closest "element". I have a function, but I don't understand why it doesn't work:
console.log($(this).parent().parent().closest('.element'));
What am I doing wrong?
In your HTML there is no closest element with the class element. You can get the closest .table_element and from this element you can then navigate to the next() or prev() .element
closest() only traveres the DOM in the UP direction, that's why you can't find it from the clicked element you are on.
$('.column_expand_list').on('click', function() {
console.log($(this).closest('.table_element').next('.element'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>
I guess this is just a repetition od #Cloned and #AlwaysHelping's answers, but anyway, here it is:
$(".column_expand_list").click(function(){console.log($(this).closest(".table_element").prev()[0])})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X this will not find a suitable "parent"</div>
</div>
<div class="element">YAY 1</div>
<div class="table_element">
<div class="column_expand_list">X click here.</div>
</div>
<div class="element">YAY 2</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>
You could simply use one .parent to go back .next() to get the div.element - you are using parent twice which takes you out of the actual parent table_cover div
Using .next() like this:
$(this).parent('div').next('.element').text()
Demo:
$('.column_expand_list').click(function() {
console.log($(this).parent('div').next('.element').text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 1</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 2</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 3</div>
</div>
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Condition</strong></div>
<div class="SameClass-value" itemprop="condition">New</div>
</div>
<div class="row">
<div class="SameClass"><strong>Color</strong></div>
<div class="SameClass-value" itemprop="color">Black</div>
</div>
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
**<div class="SameClass-value" itemprop="qty"> 5 </div>**
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
I have multiple divs that has the same class and 'itemprop' attribute and I need to be able to create a function that will return the Quantity (which in the example above is '5')
the catch here is that the structure you see above changes in other pages. In the example above, the Condition and the Color shows but on other pages those do not appear which means the structure changes except the class name and the attribute value of the 'itemprop'. See below:
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
**<div class="SameClass-value" itemprop="qty"> 5 </div>**
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
How do I get the Quantity into a JavaScript function and return the value of 5? Without having to edit the code of the site itself?
I have been playing with this but I am sure this is completely and utterly incorrect.
function () {
var x = document.getElementsByClassName("SameClass").getAttribute("itemprop");
if (x = 'price')
{
var a = document.getElementsByClassName("SameClass").getAttribute("itemprop").innerText;
return a;
}
}
The following might work for you:
function getQty() {
var arr=document.getElementsByClassName("SameClass-value");
for(var i=0;i<arr.length;i++)
if (arr[i].getAttribute("itemprop") == 'qty') return arr[i].innerHTML;
}
Or, even shorter, you can do
function getQty() {
return document.getElementsByClassName("SameClass-value")
.find(d=>d.getAttribute("itemprop") == 'qty').innerHTML;
}
Sorry for the repeated edits. It's been a long day for me today and I was trying to quickly put something together on my little smartphone.
If the classes don't change, you can select all the relevant elements then get the value from the one you need.
function getQty() {
var qty;
document.querySelectorAll("div.SameClass-value").forEach(function(element) {
if (element.getAttribute("itemprop") === "qty") {
qty = element.innerText;
}
});
return qty;
}
console.log(getQty());
<div class="my-attributes">
<div class="row">
<div class="SameClass"><strong>Condition</strong></div>
<div class="SameClass-value" itemprop="condition">New</div>
</div>
<div class="row">
<div class="SameClass"><strong>Color</strong></div>
<div class="SameClass-value" itemprop="color">Black</div>
</div>
<div class="row">
<div class="SameClass"><strong>Availability</strong></div>
<div class="SameClass-value" itemprop="avail">In Stock</div>
</div>
<div class="row">
<div class="SameClass"><strong>Quantity</strong></div>
<div class="SameClass-value" itemprop="qty"> 5 </div>
</div>
<div class="row">
<div class="SameClass"><strong>Price</strong></div>
<div class="SameClass-value" itemprop="price">250</div>
</div>
</div>
I have a set of DIVs that are displayed like a table, but aren't in an HTML table.
The structure is like this:
<div id="queryResult" style="display: block;">
<div class="rRow">
<div class="rCell4">Job</div>
<div class="rCell4">Company</div>
<div class="rCell4">Customer</div>
<div class="rCell4">Product</div>
<div class="rCell4">Balance</div>
</div>
<div class="rRow">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">XYZ co</div>
<div class="rCell4">39.100</div>
<div class="rCell4">26.48550</div>
</div>
<div class="rRow">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">MNOP co</div>
<div class="rCell4">39.100</div>
<div class="rCell4">26.48550</div>
</div>
<div class="clr"></div>
</div>
When displayed it looks something like this:
So what I want is to be able to sort the columns by clicking on the column header or something. I know there are jQuery/JavaScript libraries out there like sorttable but all the ones I find are expecting a HTML table.
Do I bite the bullet and just switch this over to a table, or is there another reasonable (easier) solution?
Here is a solution. I added some class to your html for more control.
HTML:
<div id="queryResult" style="display: block;">
<div class="rRow header">
<div class="rCell4">Job</div>
<div class="rCell4">Company</div>
<div class="rCell4">Customer</div>
<div class="rCell4">Product</div>
<div class="rCell4">Balance</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">VDry Transload</div>
<div class="rCell4">XYZ co</div>
<div class="rCell4">38.100</div>
<div class="rCell4">18.48550</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46623</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">MNOP co</div>
<div class="rCell4">31.100</div>
<div class="rCell4">29.48550</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46145</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">ADry Transload</div>
<div class="rCell4">JKH co</div>
<div class="rCell4">42.100</div>
<div class="rCell4">16.48550</div>
</div>
<div class="clr"></div>
</div>
And here is a jQuery to do sorting:
jQuery:
$('.header').children('.rCell4').each(function(index){
$(this).click(function(){
var container = $('#queryResult');
var header = $('.header');
var cmpCols = [];
$('.body').each(function(){
cmpCols.push($(this).children('.rCell4').eq(index));
});
for(i=0; i<cmpCols.length-1; i++){
for(j=i; j<cmpCols.length; j++){
if(cmpCols[i].text() > cmpCols[j].text()){
var tmp = cmpCols[i];
cmpCols[i] = cmpCols[j];
cmpCols[j] = tmp;
}
}
}
container.html(header);
for(i=0; i<cmpCols.length; i++){
container.append(cmpCols[i].parent());
}
});
});
Working jsFiddle Example.
If you gave each of your <div class="rRow"> elements a unique id, you could reorder them using jQuery .insertAfter();
e.g. for
<div class="rRow" id="row1">
...
</div>
<div class="rRow" id="row2">
...
</div>
you use $('#row1').insertAfter('#row2'); to flip the position of the two rows.
Then you just need a function which will read each value in a particular "column" in response to an onclick event on the header, get the values in that column, sort them, and reorder the rows.
I use JQuery Smooth Div Scroll. In html
<div id="makeMeScrollable">
<div class="queuenum">10</div>
<div class="queuenum">20</div>
<div class="queuenum">30</div>
<div class="queuenum">40</div>
<div class="queuenum">50</div>
<div class="queuenum">60</div>
<div class="queuenum">70</div>
<div class="queuenum">80</div>
<div ng-show="ishow" class="queuenum">90</div>
<div class="queuenum">10</div>
<div class="queuenum">20</div>
<div class="queuenum">21</div>
<div class="queuenum">12</div>
<div class="queuenum">13</div>
<div class="queuenum">14</div>
<div class="queuenum">15</div>
<div class="queuenum">17</div>
<div class="queuenum">19</div>
<div class="queuenum">14</div>
<div class="queuenum">88</div>
</div>
It work well.
But I load dynamic data by angularjs. It not work
<div id="makeMeScrollable" ng-repeat="order in currentlist1" class="row">
<div class="queuenum">{{order.queue}}</div>
</div>
Please help me.
I'm not sure if this is possible. I can't seem to even get started but I have the following HTML. Is it possible to click on a title (Column 1, Column 2 or Column 3) and have everything in the bodyModule get sorted?
<div class="moduleRowTitle">
<div class="column1">Column 1</div>
<div class="column2">Column 2</div>
<div class="column3">Column 3</div>
</div>
<div class="bodyModule">
<div class="row">
<div class="column1">AAAAA</div>
<div class="column2">BBBBB</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">AAAAA</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">CCCCC</div>
<div class="column3">AAAAA</div>
</div>
</div>
Clicking on column2 should sort as the following:
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">AAAAA</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">AAAAA</div>
<div class="column2">BBBBB</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">CCCCC</div>
<div class="column3">AAAAA</div>
</div>
Demo FIDDLE
Jquery
$(document).ready(function(){
$('.moduleRowTitle div').click(function(){
var vals = [];
var className=$(this).attr('class');
$( ".bodyModule ."+className).each(function(){
vals.push($(this).html());
});
vals.sort();
var i=0;
$( ".bodyModule ."+className).each(function(){
$(this).html(vals[i]);
i=i+1;
});
});
});
I hope this is what you expect