This question already has answers here:
Get index of element as child relative to parent
(6 answers)
Closed 1 year ago.
I have a few divs:
<div class="somediv">text</div>
<div class="somediv">text</div>
<div class="somediv">text</div>
<div class="somediv">text</div>
And when I click on for example the third div, I want to return the number 3.
I have tried something like this but it didn't work:
console.log($("this").index);
You can do something like:
var index = $(".somediv").index(this);
Remove the quotation marks - it should be console.log($(this).index());. Note: the index starts with 0.
Working example:
$('.somediv').on('click', function() {
console.log($(this).index());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="somediv">text</div>
<div class="somediv">text</div>
<div class="somediv">text</div>
<div class="somediv">text</div>
</div>
Related
This question already has answers here:
How to get the children of the $(this) selector?
(19 answers)
Closed 5 months ago.
I have 2 blocks of code and search for a longest string in each block appearing on each alert. obviously, wonderful is longest string in the block 1 and beautiful is longest string in block 2.
wonderful should be in first alert and beautiful should be in second alert, but somehow I miss something. Please give me a hand.
Thanks!
$('.parent').each(function() {
longest = "";
$('.child').each(function() {
var textChild = $(this).text();
if (textChild.length > longest.length) {
longest = textChild;
}
});
alert(longest)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="child">hello</div>
<div class="child">wonderful</div>
<div class="child">world</div>
</div>
<div class="parent">
<div class="child">hello</div>
<div class="child">beautiful</div>
<div class="child">world</div>
</div>
To do what you require you can use map() to build an array of the text content of the .child elements within each .parent, then you can use reduce() to get the longest of them.
Note that you need to output the longest value within the loop. Try this:
$('.parent').each(function() {
let longest = $(this).find('.child').map((i, el) => el.textContent.trim()).get().reduce((a, b) => a.length > b.length ? a : b);
console.log(longest);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="child">hello</div>
<div class="child">wonderful</div>
<div class="child">world</div>
</div>
<div class="parent">
<div class="child">hello</div>
<div class="child">beautiful</div>
<div class="child">world</div>
</div>
If you want to get the longest values outside of the loop, then I'd suggest pushing them to their own array which you can iterate through as required.
I have some rendered data, and I want to display it "in table".
How can I implement this using CSS? (Maybe flex could help me)
<div class="test">1</div>
<div class="test">2</div>
<div class="newRow">3</div>
<div class="test">4</div>
<div class="newRow">5</div>
<div class="test">6</div>
Expected result, something like this:
1 3 5
2 4 6
*
Divs are rendered by angular2 loop (ngFor). There may be 2 or more. I need more dynamic solutions which would be depends on "class="newRow"" - end of row.
Perhaps try this:
<div>
<div class="test">1</div>
<div class="test">3</div>
<div class="test">5</div>
</div>
<div>
<div class="test">2</div>
<div class="test">4</div>
<div class="test">6</div>
</div>
CSS:
.test{
display:inline;
}
Fiddle here: https://jsfiddle.net/d0Ltnenp/2/
I'm learing bootstrap and I'm working with the Grid System since I'm working to a responsive website with lots of tables.
<div class="row">
<div class="col-md-1">A</div>
<div class="col-md-1">B</div>
<div class="col-md-1">C</div>
</div>
<div class="row">
<div class="col-md-1">D</div>
<div class="col-md-1">E</div>
<div class="col-md-1">F</div>
</div>
I will start with this bootstrap "table". I want to move a div of the first row into the second row. Example:
<div class="row">
<div class="col-md-1">A</div>
<div class="col-md-1">B</div>
</div>
<div class="row">
<div class="col-md-1">C</div>
<div class="col-md-1">D</div>
<div class="col-md-1">E</div>
<div class="col-md-1">F</div>
</div>
I think you are misunderstanding how Bootstrap works. Its grid does not work by "moving a row's div into another row". What happens is that the grid is based off of 12 columns per row. If you want 3 elements in 1 row, you would set each one with a class of col-xx-4 (xx is either lg, md, sm or xs), since 12/4 = 3. Each element takes up 4 of the 12 columns.
For your issue at hand - you can put all 6 elements in the same row and adjust the number of columns each one spans based on the screen size using lg, md, sm and xs. Below is an example that does what I believe you are trying to do my manually moving a row's div, but this way utilizes Bootstrap's grid system correctly.
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">
A
</div>
<div class="col-sm-4 col-xs-6">
B
</div>
<div class="col-sm-4 col-xs-6">
C
</div>
<div class="col-sm-4 col-xs-6">
D
</div>
<div class="col-sm-4 col-xs-6">
E
</div>
<div class="col-sm-4 col-xs-6">
F
</div>
</div>
</div>
Here is a Demo JSFiddle
You can slide the screen to make it bigger/smaller and see the 2 rows of 3 collapse to 3 rows of 2, and vice-versa.
If I got what you wanted to ask, the simplest way to do it is by:
1) Checking the browser's width.
2) Then, get the inner element you want to move.
3) Add it to where you want to take it.
4) And remove it from it was before.
The code HTML:
<div class="row" id="row1">
<div class="col-md-1">
A
</div>
<div class="col-md-1">
B
</div>
<div class="col-md-1" id="moveto">
</div>
</div>
<div class="row" id="row2">
<h4>--</h4>
<div class="col-md-1" id="movefrom">
C
</div>
<div class="col-md-1">
D
</div>
<div class="col-md-1">
E
</div>
<div class="col-md-1">
F
</div>
</div>
The JS code:
$(document).ready(function() {
var x = document.getElementById("movefrom").innerHTML // Get the inner HTML (C in this case)
if (window.innerWidth <= 768) { // Check the browser's width
document.getElementById("moveto").innerHTML = x; // Move the element to where you want (moveto id)
document.getElementById("movefrom").innerHTML = "" // Replace the element by an empty string.
}
});
This was the most simple way I found to make it work.
Any feedback is great!
Good luck
It is my hobby to answer too late.
Do this if you want it to respond to resize and work both ways:
window.addEventListener("resize", function(event) {
//grab what to replace
var x = document.getElementById("social")
.innerHTML;
//for when going to smaller screen
if (window.innerWidth <= 560 && !x == "") {
document.getElementById("social-mobile")
.innerHTML = x;
document.getElementById("social")
.innerHTML = "";
}
var y = document.getElementById("social")
.innerHTML;
// if we are at bigger screen and node is "", then put it back
if (window.innerWidth >= 560 && y == "") {
document.getElementById("social")
.innerHTML = document.getElementById("social-mobile")
.innerHTML;
document.getElementById("social-mobile")
.innerHTML = "";
}
});
😎
Well, I have this simple jQuery function..
(function($){
$.fn.moveTo = function(selector){
return this.each(function(){
var cl = $(this).clone();
$(cl).prependTo(selector);
$(this).remove();
});
};
});
usage $('.element').moveTo('.element2');, you can also change it to appendTo, or send a parameter to change it.
i'm trying to make some special menu but i have a problem with selecting the most nested element (div) . Menu will be dynamic so it can change how much divs will be nested in one div. (parents will be created with new childs) so i need to select the last one (the most nested) without using more classes od Ids.
Here is a code i wrote until now:
<div id="strategy">
<div class="selected">
0
<div class="selected">
some text
<div class="selected"> this is the last div, but it can be anytime changed and more childs of this element can be created</div>
</div>
</div>
<div class="selected">
1
</div>
<div>
2
</div>
</div>
and something of css i tried:
div.selected:only-of-type {background: #F00;}
also tried nth:last-child, only-child.. i think everything but there must be some way how to do it.
if you're open to jQuery...
$(document).ready(function() {
var $target = $('#strategy').children();
while( $target.length ) {
$target = $target.children();
}
var last = $target.end(); // You need .end() to get to the last matched set
var lastHtml = last.html();
$('body').append('<strong>deepest child is: ' + lastHtml + '</strong>');
last.css('color', 'blue');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="strategy">
<div class="selected">
0
<div class="selected">
some text
<div class="selected"> this is the last div, but it can be anytime changed and more childs of this element can be created</div>
</div>
</div>
<div class="selected">
1
</div>
<div>
2
</div>
</div>
I have the following html code on the page received by mechanize (agent.get):
<div class="b-resumehistorylist-views">
<!-- first date start-->
<div class="b-resumehistory-date">date1</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time1</div>
company1</div>
<!-- second date start -->
<div class="b-resumehistory-date">date2</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time2</div>
company2
</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time3</div>
company3</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time4</div>
company4</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time5</div>
company5</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time6</div>
company6</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time7</div>
company7</div>
...
</div>
I need to search inside the div with class="b-resumehistorylist-views" each date.
Then find all divs between two div-dates and link each item to this particular date.
The problem is that each item (div class = b-resumehistorylist-views) is not inside div=b-resumehistorylist-views.
At final stage I need to receive the following array:
array = [ [date1, time1, company1, companylink1], [date2, time2, company2, companylink2], [date2, time3, company3, companylink3],[date2, time4, company4, companylink4] ]
I know that I must use method search with text() option, but I cannot find the solution.
My code right now can parse all companies information between div class=b-resumehistory-company, but I need to find right date.
It would be the same thing as before, just some of the class attributes have been changed:
doc = agent.get(someurl).parser
doc.css('.b-resumehistory-company').map{|x| [x.at('./preceding-sibling::div[#class="b-resumehistory-date"][1]').text , x.at('.b-resumehistory-time').text, x.at('a').text, x.at('a')[:href]]}