How to rearrange elements using jQuery ?
Orginal Code :
<p id="paragraph1">1</p>
<p id="paragraph2">2</p>
<p id="paragraph3">3</p>
<p id="paragraph4">4</p>
<p id="paragraph5">5</p>
After Rearrange (put p3 in p2's place)
<p id="paragraph1">1</p>
<p id="paragraph3">3</p>
<p id="paragraph2">2</p>
<p id="paragraph4">4</p>
<p id="paragraph5">5</p>
You can use .insertBefore():
$("#paragraph3").insertBefore("#paragraph2");
Slightly more elaborate example (clicking on a paragraph moves it up):
$("p").click(function() {
$(this).insertBefore($(this).prev());
});
You can test both examples here.
Related
This question already has answers here:
JQuery: Remove duplicate elements?
(8 answers)
Closed 2 years ago.
I'm working on "removing duplicates" from html with jQuery. An example is the following:
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">something else</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">content</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">last p tag finally</p>
What I would like to end up with is:
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">something else</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">content</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">last p tag finally</p>
So every element to check has the same class and I want to remove the element, when the html() is the same.
Can anybody help me out with that? Can't seem to find anything helpful that jQuery provides for that...
You could use Map to store seen elements based on the inner html content and use it with jquery filter method to filter html based on that map.
const map = new Map()
const filtered = $('.duplicateRemove')
.filter(function() {
const html = $(this).html();
if (map.has(html)) return false;
else {
map.set(html)
return true;
}
})
$('body').html(filtered)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">something else</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">content</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">last p tag finally</p>
I have a section of code like this
<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text
<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some other text
and I need to replace it with
<h3>some text</h3>
<h3>some other text </h3>
Any help is appreciated.
The jquery solution: JSFiddle Demo
$('p[class="xd"]').each(function(index,item){
$(item).replaceWith("<h3>"+$(item).html()+"</h3>"); // keep the text, swap the tags
});
Thanks to Vishal Taj PM for showing a shorter solution: JSFiddle Demo
(for this case, there is no difference between text() and html())
$('p.xd').each(function(){
$(this).replaceWith("<h3>"+$(this).text()+"</h3>")
});
If you are looking for a solution with Jquery you can use replaceWith(). it will replace existing tag with new one.
please find the code snippet below.
$('p.xd').each(function(){
$(this).replaceWith("<h3>"+$(this).text()+"</h3>")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text</p>
<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some other text</p>
a javascript solution
<script>
document.getElementsByClassName("xd")[0].outerHTML="<h3>some text</h3>"
</script>
<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text</p>
<p style="position:absolute;top:-866px;left:1550px;white-space:nowrap" class="xd">some text</p>
<script>
var all_p = document.getElementsByClassName("xd");
while (all_p.length != 0) {
all_p[0].outerHTML = "<h3>some text</h3>";
}
</script>
Is there any jQuery equivalent similar to
$(document).ready(function(){
$('para')[2].css("color","red");
});
for the code below
document.getElementsByClassName('para')[2].style.color = "red";
<p class="para">Content</p>
<p class="para">Content</p>
<p class="para">Content</p>
<p class="para">Content</p>
<p class="para">Content</p>
<p class="para">Content</p>
<p class="para">Content</p>
<p class="para">Content</p>
<p class="para">Content</p>
<p class="para">Content</p>
I want the CSS to be applied to the nth paragraph.
Try .eq if you want to access a specific jQuery element from a list of matched stuff:
$(".para").eq(2).css("color","red");
Edit: The dot notation, .para, is functionally equivalent to getElementsByClassName("para")
A jQuery alternative could be crafted as follows. Note that nth-of-type is not zero index based
$('p.para:nth-of-type(3)').css('color', 'red')
JSFiddle Link
You can use n-th child to set the style accordingly
$(document).ready(function(){
$( ".para:nth-child(2)" ).css("color","red");
});
I would normally use the :eq() selector for this:
$('.para:eq(2)').css('color', 'red');
Hi how can I group my document.querySelectorAll if I have a case like this:
<div>
<p class="flower">Flower 1</p>
<p class="bee">Bee 1</p>
<p class="tree"></p>
</div>
<div>
<p class="flower">Flower 2</p>
<p class="dude"></p>
<p class="snow-leopard"></p>
</div>
<div>
<p class="flower">Flower 3</p>
<p class="tree"></p>
<p class="mountain"></p>
<p class="wizard"></p>
<p class="bee">Bee 3</p>
</div>
I always want to select the flower, if there is a bee I want to have it attached to the flower, I don't care about the rest. The flowers and bees don't have a specific order in the div and there are cases with no bee. Also assume that there is a class at the flower and bee but the rest of the structure isn't as clean as in the example. The only solution I have so far is to go a few levels up and then use regex. At the end I want to include them both into a json:
[{flower: "yellow", bee:"bumblebee"},...]
This approach:
var flowers = document.querySelectorAll(flower);
var bees = document.querySelectorAll(bee);
And then iterating afterwards over the both arrays does not work.
The problem is that you can't really match the flowers with the bees simply with CSS selectors. You need to iterate over all flowers and find the bee sibling if there is one. One way to do this is to get the parent of a flower and then look for bees.
var obj = Array.prototype.map.call(document.querySelectorAll(".flower"), function(f){
var node = {flower: f.textContent};
var bee = f.parentNode.querySelector(".bee");
if (bee) {
node.bee = bee.textContent;
}
return node;
});
IE10 resets the scrollbars (position to top-left) for a block element if it is hidden and displayed. This block is part of a complex UI that shows and hides blocks from various places. The other browsers and IE versions works as expected (display back the block maintaing the scroll position as it was before hiding the block). See the issue here on jsfiddle.
HTML
Last item is visible (100).<br>
TEST : click
<input type="button" id="hide" value="Hide"> then <input type="button" id="show" value="Show">. Now item (1) is visible (IE10 only)
<div id="divu" style="margin-top: 10px; width:200px; height:500px; border:1px solid #888; overflow:auto;">
<p class="item">1</p>
<p class="item">2</p>
<p class="item">3</p>
<p class="item">4</p>
<p class="item">5</p>
<p class="item">6</p>
<p class="item">7</p>
<p class="item">8</p>
<p class="item">9</p>
<p class="item">10</p>
<p class="item">11</p>
<p class="item">12</p>
<p class="item">13</p>
<p class="item">14</p>
<p class="item">15</p>
<p class="item">16</p>
<p class="item">17</p>
<p class="item">18</p>
<p class="item">19</p>
<p class="item">20</p>
<p class="item">21</p>
<p class="item">22</p>
<p class="item">23</p>
<p class="item">24</p>
<p class="item">25</p>
<p class="item">26</p>
<p class="item">27</p>
<p class="item">28</p>
<p class="item">29</p>
<p class="item">30</p>
<p class="item">31</p>
<p class="item">32</p>
<p class="item">33</p>
<p class="item">34</p>
<p class="item">35</p>
<p class="item">36</p>
<p class="item">37</p>
<p class="item">38</p>
<p class="item">39</p>
<p class="item">40</p>
<p class="item">41</p>
<p class="item">42</p>
<p class="item">43</p>
<p class="item">44</p>
<p class="item">45</p>
<p class="item">46</p>
<p class="item">47</p>
<p class="item">48</p>
<p class="item">49</p>
<p class="item">50</p>
<p class="item">51</p>
<p class="item">52</p>
<p class="item">53</p>
<p class="item">54</p>
<p class="item">55</p>
<p class="item">56</p>
<p class="item">57</p>
<p class="item">58</p>
<p class="item">59</p>
<p class="item">60</p>
<p class="item">61</p>
<p class="item">62</p>
<p class="item">63</p>
<p class="item">64</p>
<p class="item">65</p>
<p class="item">66</p>
<p class="item">67</p>
<p class="item">68</p>
<p class="item">69</p>
<p class="item">70</p>
<p class="item">71</p>
<p class="item">72</p>
<p class="item">73</p>
<p class="item">74</p>
<p class="item">75</p>
<p class="item">76</p>
<p class="item">77</p>
<p class="item">78</p>
<p class="item">79</p>
<p class="item">80</p>
<p class="item">81</p>
<p class="item">82</p>
<p class="item">83</p>
<p class="item">84</p>
<p class="item">85</p>
<p class="item">86</p>
<p class="item">87</p>
<p class="item">88</p>
<p class="item">89</p>
<p class="item">90</p>
<p class="item">91</p>
<p class="item">92</p>
<p class="item">93</p>
<p class="item">94</p>
<p class="item">95</p>
<p class="item">96</p>
<p class="item">97</p>
<p class="item">98</p>
<p class="item">99</p>
<p class="item selected">100</p>
</div>
...
JS
$(document).ready(function(){
$('#hide').click(function(){
$('#divu').hide();
});
$('#show').click(function(){
$('#divu').show();
});
$('#divu').scrollTop($('#divu')[0].scrollHeight);
});
...
CSS
.item {
margin:1px;
padding: 2px;
background: #eee;
}
.selected {
background-color: #faa;
}
UNACCEPTED KNOWN SOLUTION: I do not want this 'workaround' to store 'scrollTop'/'scrollLeft' and restore them back for my app in hundreds of source-code lines only for IE10 while the other browsers works just fine. The provided code is as simple as possible just to illustrate the issue. In my real app there are iframes involved and many HTML Elements. I do not hide/show directly the block (overflow:auto) but a parent many levels up in the DOM tree. The question is why IE10 behave like this (is this a known issue of IE10?) and how can I implement a shorter/smarter solution with a minimal intervention on the existing source-code.
Your problem will solve if you add the below line into click function
$('#divu').scrollTop($('#divu')[0].scrollHeight);
Working Demo
jQuery
$(document).ready(function(){
$('#hide').click(function(){
$('#divu').hide();
});
$('#show').click(function(){
$('#divu').show();
$('#divu').scrollTop($('#divu')[0].scrollHeight); /*Added this line*/
});
$('#divu').scrollTop($('#divu')[0].scrollHeight);
});
I don't know what is the reason of this, but I guess you can store scrollTop value when you hide list and restore it when you show it like this:
$(document).ready(function(){
var scrollVal; // variable
$('#hide').click(function(){
scrollVal = $('#divu').scrollTop();
$('#divu').hide();
});
$('#show').click(function(){
$('#divu').show();
$('#divu').scrollTop(scrollVal);
});
$('#divu').scrollTop($('#divu')[0].scrollHeight);
});
Or use
$('#divu').css('visibility', 'collapse');
// ...
$('#divu').css('visibility', 'visible');
Fiddle
Or you can overload jQuery show and hide functions with your custom logic. I think this solution will be much easy and efficient for you.