This question already has answers here:
RegEx match open tags except XHTML self-contained tags
(35 answers)
Closed 3 years ago.
I have to match every element that has an attribute 'class'='row' in order to use it as separator in javascript .split() method. How can I archive this with regular expressions? In the following string <div class="row" tabindex="0"> should be matched.
<div class="row" tabindex="0"><div class="cell">rect</div><div class="cell">A</div><div class="cell">0</div><div class="cell">0</div><div class="cell">10</div><div class="cell">10</div></div><div class="row" tabindex="0"><div class="cell">rect</div></div>
Just use jQuery and save yourself the headache.
let html = $(` <div class="row" tabindex="0">
<div class="cell">rect</div>
<div class="cell">A</div>
<div class="cell">0</div>
<div class="cell">0</div>
<div class="cell">10</div>
<div class="cell">10</div>
</div>
<div class="row" tabindex="0">
<div class="cell">rect</div>
</div>`);
let rows = html.filter('.row');
Then if you need the raw HTML string of a specific row:
let row1HTML = rows[0].innerHTML;
Related
This question already has answers here:
Getting the parent div of element
(7 answers)
Closed last month.
I have a project. I am working to find a container using an only child in JavaScript.
I want to add a class to the container of the req-address.
I want to take req in Javascript using an only child of this element. How to do it?
const search = document.querySelector('.search-form');
const addresses = document.querySelectorAll('.req-address');
search.addEventListener('keyup', function(e) {
addresses.forEach(function(address) {
if (address.innerHTML === search.value) {
address.classList.add('.search-active');
}
});
});
<div class="reqs-container">
<div class="req">
<div class="req-time">
<div class="req-time_from">13:00</div>
<span></span>
<div class="req-time_to">15:00</div>
</div>
<div class="req-restaurant">Argentina Grill</div>
<div class="req-address">Оболонь</div>
<div class="req-name">Аліна</div>
Instagram
Приєднатися
</div>
<div class="req">
<div class="req-time">
<div class="req-time_from">13:00</div>
<span></span>
<div class="req-time_to">15:00</div>
</div>
<div class="req-restaurant">Argentina Grill</div>
<div class="req-address">Хрещатик</div>
<div class="req-name">Аліна</div>
Instagram
Приєднатися
</div>
</div>
You needed to remove the dot from the class in .classList.add('.search-active')
To add to the parent div with class = req, you can use
address.closest('div.req')
Here is an alternative version which will toggle instead of just add.
Also I use input event since it handles paste too
Lastly I use includes, textContent, trim and toLowerCase to give the user a better chance to find stuff since innerHTML could have all sorts of whitespace
If you insist on the complete value in the address field must be typed to be found, change
address.textContent.toLowerCase().trim().includes(val)
to
address.textContent === val
const search = document.querySelector('.search-form');
const addresses = document.querySelectorAll('.req-address');
search.addEventListener('input', function(e) {
const val = this.value.toLowerCase();
addresses.forEach(address => address.closest('div.req').classList.toggle('search-active', address.textContent.toLowerCase().trim().includes(val)));
});
.search-active { color: green }
<input type="text" class="search-form" />
<div class="reqs-container">
<div class="req">
<div class="req-time">
<div class="req-time_from">13:00</div>
<span></span>
<div class="req-time_to">15:00</div>
</div>
<div class="req-restaurant">Argentina Grill</div>
<div class="req-address">Оболонь</div>
<div class="req-name">Аліна</div>
Instagram
Приєднатися
</div>
<div class="req">
<div class="req-time">
<div class="req-time_from">13:00</div>
<span></span>
<div class="req-time_to">15:00</div>
</div>
<div class="req-restaurant">Argentina Grill</div>
<div class="req-address">Хрещатик</div>
<div class="req-name">Аліна</div>
Instagram
Приєднатися
</div>
</div>
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I am new in javascript and I am trying to change the opacity of a div and I don't know how to do it, and I didn't find anything online.
here is my code so far:
Javascript
function close_images(){
document.getElementsByClassName("modificar_imagen").style.opacity="0";
}
HTML
<div class="modificar_imagen">
<div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
<div class="contenido">
<div class="grid">
<div class="image_user"><img src="img/user1.jpg"></div>
<div class="image_user"><img src="img/user1.jpg"></div>
</div>
</div>
</div>
document.getElementsByClassName("modificar_imagen") retrieves a HTMLCollection. It would be better to use document.querySelectorAll() so that you can use the forEach() method to iterate over the image collection:
document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");
That should do it.
function close_images(){
document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");
}
close_images()
<div class="modificar_imagen">
<div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
<div class="contenido">
<div class="grid">
<div class="image_user"><img src="img/user1.jpg"></div>
<div class="image_user"><img src="img/user1.jpg"></div>
</div>
</div>
</div>
This question already has answers here:
Select elements by attribute
(17 answers)
Closed 6 years ago.
i have a situation in my page i don't have any clue other than this 2 clue to target
<div itemscope>
some <html>
........
</div>
how can i target div having itemscope i,e <div itemscope>
suppose i have structure like this
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
PLEASE SUGGEST ME WHAT THIS KIND OF SELECTOR IS CALLED SO THAT I CAN SEARCH IT ON STACKOVERFLOW
var allDivWith_itemscope = $('div[i don"t know what else]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
Well there are two things i want to mention:
You have a typo with href attribute.
You should use data-* prefix for custom attributes.
So, on basis of these you can change to this:
<div data-itemscope>
Now in js/jquery/css you can do this:
// css
div[data-itemscope]{
properties:values;
}
// javascript
document.querySelector('div[data-itemscope]')
//jquery
$('div[data-itemscope]')
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
I am trying to change the text of h1 via using following code
document.getElementById("wpbody-content").getElementsByClassName("wrap").getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
Here is the HTML code
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div></div>
But it shows me following error
TypeError: document.getElementById(...).getElementsByClassName(...).getElementsByTagName is not a function
the getElementsByClassName() method returns an array of elements. You need to refer to the first wrap element in the array, just like you are correctly doing for the h1 elements.:
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
Replace getElementsByClassName("wrap") by getElementsByClassName("wrap")[0]
document.getElementById("wpbody-content")
.getElementsByClassName("wrap")[0]
.getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div>
</div>
You can also use getElementsByTagName:
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div>
</div>
try jQuery as
$('#wpbody-content .wrap h1').text('Application Forms');
This question already has answers here:
How do you select in-line text with Jquery?
(3 answers)
Closed 7 years ago.
I am trying to change the text of h1 tag but not other inner html. Here is my code
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Candidate Application Forms';
HTML code
<div id="wpbody-content">
<div class="wrap">
<h1>All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
I need to change only <h1>All Forms</h1> text not other inside the tag.
I need to do it without jQuery
Insert an extra span like this:
<div id="wpbody-content">
<div class="wrap">
<h1><span id="allForms">All Forms</span> <a class="title-action" href="">Add New</a></h1>
</div>
</div>
then manipulate it with:
document.getElementById('allForms').innerHTML = 'Candidate Application Forms';
Put All Forms in span with id like
<span id="spanId">All Forms </span>
now change content of span with id
If you want this without changing HTML:
But the best way is probably to wrap All Forms into an element, and change it.
var elt = document.getElementById("wpbody-content")
.getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0];
elt.innerHTML = 'Candidate Application Forms ' + elt.children[0].outerHTML;
<div id="wpbody-content">
<div class="wrap">
<h1>All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
tl;dr jsFiddle
Every chunk of text is actually a TextNode. You can imagine your HTML like this:
<h1>
<text data="All Forms" />
<a class="title-action" href="">
<text data="Add New" />
</a>
</h1>
You can access those elements using HTMLElement.childNodes property:
var children = elm.childNodes;
for(var i=0,l=children.length; i<l; i++) {
if(children[i] instanceof Text)
return children[i];
}
HTMLElement.children is a list without Text nodes.
All you need is to add an id to your element and you can change it as you want.
document.getElementById("change").innerHTML="it is changed";
<div id="wpbody-content">
<div class="wrap">
<h1 id="change">All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
It depends on the HTML in the wrap-html tag, you could use javascript replace function on the innerHTML String, with an easy regular Expression like /<h1>[^<]*/.
/<h1>[^<]*/ matches "<h1>...until next less-then-sign (<)"
here is an example:
var newHeader = 'Candidate Application Forms'
var htmlValue = document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].innerHTML;
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].innerHTML =
htmlValue.replace(/<h1>[^<]*/,"<h1>" + newHeader);
// Tested with Win7 on Chrome 46+
<div id="wpbody-content">
<div class="wrap">
<h1>All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
If you do not want to change your document's current structure, I suggest you to change only the first child of the H1 node:
var h1=document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0];
h1.firstChild.nodeValue='Candidate Application Forms';