As in mentioned code,I used getElementById and getElementsByClassName but it is not working.
It is giving error as
f[0].getElementById is not a function inside a console.
let f = document.getElementsByClassName('sec');
console.log(f[0].getElementById('p1'));
document.write(f[0].getElementById('p1'))
<div id="maindiv">
<section class="sec" id="mysec1">
<p class="para" id="p1">Para1</p>
<p class="para" id="p2">Para2</p>
<p class="para" id="p3">Para3</p>
<p class="para" id="p4">Para4</p>
<p class="para" id="p5">Para5</p>
</section>
<section class="sec" id="mysec2">
<p class="para" id="pp1">Apara1</p>
<p class="para" id="pp2">Apara2</p>
<p class="para" id="pp3">Apara3</p>
<p class="para" id="pp4">Apara4</p>
<p class="para" id="pp5">Apara5</p>
</section>
</div>
getElementById is function of document object.
If you want to get p1 inside class sec you can use querySelector as
document.querySelector('.sec #p1')
div id="maindiv">
<section class="sec" id="mysec1">
<p class="para" id="p1">Para1</p>
<p class="para" id="p2">Para2</p>
<p class="para" id="p3">Para3</p>
<p class="para" id="p4">Para4</p>
<p class="para" id="p5">Para5</p>
</section>
<section class="sec" id="mysec2">
<p class="para" id="pp1">Apara1</p>
<p class="para" id="pp2">Apara2</p>
<p class="para" id="pp3">Apara3</p>
<p class="para" id="pp4">Apara4</p>
<p class="para" id="pp5">Apara5</p>
</section>
</div>
<!-- Project -->
<script type="text/javascript">
let f = document.getElementsByClassName('sec');
console.log(document.querySelector('.sec #p1'));
//document.write(document.querySelector('.sec #p1'))
</script>
getElementsByClassName response is the array of DOM element.
getElementById is the function of the document, not DOM element.
console.log(document.getElementById('p1'));
document.write(document.getElementById('p1'))
.getElementById is a method of the object document. So you need to change your code a bit:
console.log(document.getElementById('p1'));
document.write(document.getElementById('p1'))
bro why using core js use jquery and make your life simple:
var f =$('#mysec1 > #p1'); using jquery
and if u really want to use core js use it like this:
var myDomElement = document.getElementById( "foo" ); // A plain DOM element.
$( myDomElement ).find( "a" );
Related
I want to get the text of the paragraph (p) contained in div by clicking on that div using the class name. I tried using innerText and innerHTML but it returns undefined in the console. How can I do it using only Javascript?
HTML
<div class="showName">
<p class="paragraphs">Text 1</p>
</div>
<div class="showName">
<p class="paragraphs">Text 2</p>
</div>
<div class="showName">
<p class="paragraphs">Text 3</p>
</div>
Javascript
const showName = document.getElementsByClassName('showName');
const paragraphs = document.getElementsByClassName('paragraphs');
Array.prototype.forEach.call(showName, function(element) {
element.addEventListener('click', function() {
// How can I do it here?
});
});
Working example: https://codepen.io/shinaBR2/pen/qBbxRgz
Basic code is
Array.prototype.forEach.call(showName, function(element) {
element.addEventListener('click', function() {
// How can I do it here?
const text = element.querySelector('.paragraphs').textContent;
alert(text);
});
});
If you want to get text inside all the paragraphs having "paragraphs" class, this code can also help you:
HTML
<div class="showName">
<p class="paragraphs">Text 1</p>
</div>
<div class="showName">
<p class="paragraphs">Text 2</p>
</div>
<div class="showName">
<p class="paragraphs">Text 3</p>
</div>
JAVASCRIPT
const showName = document.getElementsByClassName('showName');
const paragraphs = document.getElementsByClassName('paragraphs');
for(i=0; i < paragraphs.length; i++){
console.log(paragraphs[i].innerText);
}
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>
Here is the code:
<p class="phar">phar</p>
<p class="phar no">phar</p>
<p class="phar no">phar</p>
<p class="phar">phar</p>
<p class="phar">phar</p>
How do I get elements with only the class name 'phar' without 'no' using only javascript?
Edit use the :not() pseudo-class selector in a querySelectorAll() function:
const els = document.querySelectorAll(".phar:not(.no)");
console.log([...els]);
<p class="phar">phar</p>
<p class="phar no">phar</p>
<p class="phar no">phar</p>
<p class="phar">phar</p>
<p class="phar">phar</p>
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.
I am trying to wrap some selected elements in <blockquote> tags but the method I thought might work replaces the existing tags rather than wrapping them.
Here's my code.
$("input[value='Quote']").on("click", function() {
document.execCommand('formatBlock', false, '<blockquote>');
});
and...
<div contentEditable>
<p>para 1</p>
<p>para 2</p>
</div>
<input type="button" value="Quote" />
I want to end up with something like this...
<div contentEditable>
<blockquote>
<p>para 1</p>
<p>para 2</p>
</blockquote>
</div>
rather than the following which is what I currently get...
<div contentEditable>
<blockquote>
para 1
<br />
para 2
</blockquote>
</div>
Thanks
This should do it
$("input[value='Quote']").on("click", function() {
$("<blockquote/>").insertBefore($("[contenteditable]").find("p:first")).append($("[contenteditable]").find("p"))
});