Develop Reference

Find the overall index of an element in jQuery

Please help me someone how to get Index of an Element which is located in different tag groups. I want to get the index of that tag which respect to the body tag.
$('.selectthis > .wrapper > p').click(function() {
// $('.selectthis').length return 3
var getParentIndex = $(this).closest('.selectthis').index();
$('.result').text(getParentIndex);
//How to get index as 3 of tag selecthis when i click on 'text3'
//When i click on text1 or text3 result is same 0
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text1
</p>
</div>
</div>
<div class="selectthis">
<divc class="wrapper">
<p>
text2
</p>
</div>
</div>
</div>
<div style="border: 1px solid blue; margin: 10px;">
<div class="selectthis">
<divc class="wrapper">
<p>
text3
</p>
</div>
</div>
<p class="result">
</p>
</div>

The .selectthis elements are not siblings so to get the index of them related to each other you need to provide a selector to index() to find the current element within, eg. index('.selectthis')
Also note that the index of an element is zero-based, so the third element would return an index of 2. As such you need to add one to the value to get the output you want. Try this:
$('.selectthis > .wrapper > p').click(function() {
var getParentIndex = $(this).closest('.selectthis').index('.selectthis') + 1;
$('.result').text(getParentIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text1
</p>
</div>
</div>
<div class="selectthis">
<div class="wrapper">
<p>
text2
</p>
</div>
</div>
</div>
<div style="border: 1px solid blue; margin: 10px;">
<div class="selectthis">
<divc class="wrapper">
<p>
text3
</p>
</div>
</div>
<p class="result"></p>
</div>

There is no direct way as parent element of each selectthis is different.
One work around is, you can get the array of all selectthis and compare it with parent selectthis of clicked text.
see below code
$(function(){
$('.selectthis > .wrapper > p').click(function() {
var $selectThisArray = $('.selectthis');
var getParentIndex = 0;
var $parentElement = $(this).closest('.selectthis');
$.each($selectThisArray, function(index, val){
if($(val).is($parentElement)) {
getParentIndex = index;
}
});
$('.result').text(getParentIndex);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text1
</p>
</div>
</div>
<div class="selectthis">
<div class="wrapper">
<p>
text2
</p>
</div>
</div>
</div>
<div style="border: 1px solid blue; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text3
</p>
</div>
</div>
<p class="result">
</p>
</div>

Replacing div data with other divs jQuery

When I click on any link it's names should up in above banner, like sr no 1 name is jack and smith then TEST1 should replace by jack and test2 by smith and when i click on other name then in place of jack and smith those names should show and i have 100+ data names so i need just a simple few lines jQuery code which will do that without refreshing my page... and one more thing when page loads then TEST1 and TEST2 should show auto 1st name...
Sorry I did a lot of typing but starter here please help
<div style="border:1px solid black;">
<div style="display:inline; margin-left:20%;">
<img style="display:inline;" src="images/soccer-ball.png" height="50px" width="50px">
<p id="h1" style="display:inline;" placeholder="Test">TEST1</p>
</div>
<div style="display:inline; margin-left:30%;">
<img style="display:inline;" src="images/soccer-ball.png" height="50px" width="50px">
<p id="h2" style="display:inline;">TEST2</p>
</div>
</div>
<br>
<div>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 1</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p id="home">jack</p>
<p id="away">Smith</p>
</div>
</div>
</a>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 2</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p id="home">Jhon</p>
<p id="away">hill</p>
</div>
</div>
</a>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 3</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p>jason</p>
<p>smantha</p>
</div>
</div>
</a>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 4</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p>Ducan</p>
<p>Gio</p>
</div>
</div>
</a>
</div>
$(document).ready(function(){
$("#h1").replaceWith($('#home').text());
$("#h2").replaceWith($('#away').text());
});
$("#link").click(function(){
var x = $("#home").html();
var y = $("#away").html();
//alert(x);
$("#h1").html(x);
$("#h2").html(y);
});

You should not assign the same id to multiple html elements (it is malformed and jQuery won't be able to find the elements you intend). In addition, you forgot to set attributes for some of the names that you want to populate at the top. Finally, you are using replaceWith() which is removing the elements that you are then looking to update later on click. I changed several of your ids to classes, filled in the missing ones, and updated your jQuery to eliminate the replaceWith() issue and work with the class approach. See below.
$(document).ready(function() {
$("#h1").html($(".home").first().text());
$("#h2").html($(".away").first().text());
});
$(".link").click(function() {
var x = $(this).find(".home").first().html();
var y = $(this).find(".away").first().html();
$("#h1").html(x);
$("#h2").html(y);
});
<div style="border:1px solid black;">
<div style="display:inline; margin-left:20%;">
<img style="display:inline;" src="https://via.placeholder.com/50x50" height="50px" width="50px">
<p id="h1" style="display:inline;" placeholder="Test">TEST1</p>
</div>
<div style="display:inline; margin-left:30%;">
<img style="display:inline;" src="https://via.placeholder.com/50x50" height="50px" width="50px">
<p id="h2" style="display:inline;">TEST2</p>
</div>
</div>
<br>
<div>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 1</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">jack</p>
<p class="away">Smith</p>
</div>
</div>
</a>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 2</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">Jhon</p>
<p class="away">hill</p>
</div>
</div>
</a>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 3</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">jason</p>
<p class="away">smantha</p>
</div>
</div>
</a>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 4</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">Ducan</p>
<p class="away">Gio</p>
</div>
</div>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

find duplicated class within div using each()

<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
I have few block of '.d' , how to use each() to find whether '.head' is more than one? if yes, remove the duplicated '.head'
$('.d').each(function(index, value){
// find duplicated .head
}

Try to use .not() function along with :eq() selector to achieve what you want,
$('.d').each(function(){
$(".head",this).not(":eq(0)").remove();
});
DEMO

You don't need to use .each, just use a selector that matches all the duplicates after the first one.
$(".d .head:not(:nth-child(0))").remove();

Straight away you can do it in a single statement as:
$('.d').find(".head:gt(0)").remove();

You can also use :first-child
$('button').click(function() {
$(".d .head:not(:first-child)").remove();
})
.d {
border: 1px solid red;
padding: 5px;
margin-bottom: 5px;
}
.d .head {
border: 1px solid green;
padding: 5px;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<button>Remove</button>

How to align div which having different height?

I need a Javascript code to append new DIV's in this following model. I will use default ordering like float left, those items are ordering in the horizontal manner. Please help me
<div id="maincontainer">
<div style="height:100px;width:150px; float:left; border:1px solid red; margin:5px;">smallest</div>
<div style="height:200px;width:150px; float:left; border:1px solid red; margin:5px;">largest</div>
<div style="height:150px;width:150px; float:left; border:1px solid red; margin:5px;">middle</div>
<div style="height:100px;width:150px; float:left; border:1px solid red; margin:5px;">middle2</div>
<div style="height:190px;width:150px; float:left; border:1px solid red; margin:5px;">middle3</div>
<div style="height:160px;width:150px; float:left; border:1px solid red; margin:5px;">middle4</div>
</div>
<javascript>
$('div').sort(function (a, b) {
return $(a).height() > $(b).height() ? 1 : -1;
}).appendTo('body');
</javascript>
Output I'm getting is
I need like this

You can to create 3 or that you need columns with fixed width and put blocks in this w/o floating.
For example:
<div id="first_col">
<div class="block">
content
</div>
<div class="block">
content2
</div>
</div>
<div id="second_col">
<div class="block">
content
</div>
<div class="block">
content2
</div>
</div>
<div id="last_col">
<div class="block">
content
</div>
<div class="block">
content2
</div>
</div>
And apped by JS new blocks into div with class, where height is minimal.

Problem with Div/Box when scolling Up or Down

I have used position: fixed; so the box stay at the same place when scrolling up or down.
Problem is Categories (div) is not showing all the content when it large. Content missing at the bottom of the Categories
See example: http://jsfiddle.net/Dyx22/
<div style="background-color:pink; height:150px; margin-bottom:10px">header </div>
<div id="side_manu" style="float:left; width:190px; position: fixed; margin-bottom:300px;">
<div style="border:1px solid black">
Categories
<div style="padding:10px"> Cat 1 </div>
<div style="padding:10px"> Cat 2 </div>
<div style="padding:10px"> Cat 3 </div>
<div style="padding:10px"> Cat 4 </div>
<div style="padding:10px"> Cat 5 </div>
<div style="padding:10px"> Cat 6 </div>
<div style="padding:10px"> Cat 7 </div>
<div style="padding:10px"> Cat 8 </div>
<div style="padding:10px"> Cat 9 </div>
<div style="padding:10px"> Cat 10 </div>
<div style="padding:10px"> Cat 11 </div>
<div style="padding:10px"> Cat 12 </div>
<div style="padding:10px"> Cat 13 </div>
<div style="padding:10px"> Cat 14 </div>
<div style="padding:10px"> Cat 15 </div>
<div style="padding:10px"> Cat 16 </div>
<div style="padding:10px"> Cat 17 </div>
<div style="padding:10px"> Cat 18 </div>
</div>
</div>
<div id="itemlist" style="float:left; width:600px; margin-left:200px; margin-right:10px; ">
<div style="width:600px; background-color:yellow; padding: 10px;">
<div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 1 <br /> Item 1 <br /> Item 1</div>
<div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 2 <br /> Item 2 <br /> Item 2</div>
<div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 3 <br /> Item 3 <br /> Item 3</div>
<div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 4 <br /> Item 4 <br /> Item 4</div>
<div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 5 <br /> Item 5 <br /> Item 5</div>
<div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 6 <br /> Item 6 <br /> Item 6</div>
<div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 7 <br /> Item 7 <br /> Item 7</div>
<div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 8 <br /> Item 8 <br /> Item 8</div>
<div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 9 <br /> Item 9 <br /> Item 9</div>
</div>
</div>
<div id='display_cart' style="width:190px; float:left; font-size:12px; background-color:green "> Cart Info.</div>

The content is there, but because the div is fixed, you can never scroll down to see anything that is at the bottom of the box.
If possible, I would read a little more about page layouts and css - for example you are using a lot of DIV's here where it would be best to use lists and there is a lot of inline css that could be replaced with a couple of lines of css.
----Edit----
Assuming you want to keep this design, one way you could get around it (although maybe not the most user-friendly or aesthetically pleasing) is to set a height for the side-menu and setting overflow to auto.
So you would replace the "side_manu" div would be as follows:
<div id="side_manu" style="float:left; width:190px; position: fixed; margin-bottom:300px; height: 75%; overflow: auto; border:1px solid black">
Categories
<div style="padding:10px"> Cat 1 </div>
<div style="padding:10px"> Cat 2 </div>
<div style="padding:10px"> Cat 3 </div>
<div style="padding:10px"> Cat 4 </div>
<div style="padding:10px"> Cat 5 </div>
<div style="padding:10px"> Cat 6 </div>
<div style="padding:10px"> Cat 7 </div>
<div style="padding:10px"> Cat 8 </div>
<div style="padding:10px"> Cat 9 </div>
<div style="padding:10px"> Cat 10 </div>
<div style="padding:10px"> Cat 11 </div>
<div style="padding:10px"> Cat 12 </div>
<div style="padding:10px"> Cat 13 </div>
<div style="padding:10px"> Cat 14 </div>
<div style="padding:10px"> Cat 15 </div>
<div style="padding:10px"> Cat 16 </div>
<div style="padding:10px"> Cat 17 </div>
<div style="padding:10px"> Cat 18 </div>
Please note the added height and overflow parameters, and that I have removed your extra border div and added the border property to the "side_manu" div.

i think you just have to remove any unnecessary header or padding among your content to fit it in like this:
http://jsfiddle.net/Dyx22/6/