I have html blocks and there would be many this kind of html block with different html values and image sources.
<div class="customers__photo" data-id="a1">
<div class="infoblock infoblock-hidden">
<div class="infoblock__user-name"><strong>Alexander</strong></div>
<div class="infoblock__date">21 August 2022</div>
<div class="infoblock__text">Comportable table</div>
</div>
<img src="girl1.jpg" class="reviews__photo">
</div>
I want to extract all html values as array and I will console.log all values, sources with Jquery.
img_array =$(this).closest('.customers__content').find('.infoblock__user-name, .infoblock__date, .infoblock__text, img').map(function() {return
let name = $(".infoblock__user-name").html();
let date = $(".infoblock__date").html();
let text = $(".infoblock__text").html();
$("img").attr("src")
}).get();
img_array.forEach(function(name, date, text, src) {
console.log(name, date, text, src);
//$(".listblock").append(<img class="listblock__photo" src="${src}">);
});
I want to get all class values as i got for source of image (for (infoblock__user-name, infoblock__date, infoblock__text, )) using one foreACH. PLEASE HOW CAN i do that?
Your syntax to implement map() isn't correct. You need to return an object, and the properties of that object need to be key/value pairs.
You also need to retrieve the values from the DOM relative to the current .customers__photo element in the DOM, not by selecting all instances of that class.
Try this:
const data = $('.customers__photo').map((i, el) => ({
name: $(el).find('.infoblock__user-name').text(),
date: $(el).find('.infoblock__date').text(),
text: $(el).find('.infoblock__text').text(),
src: $(el).find('.reviews__photo').prop('src'),
})).get();
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="customers__photo" data-id="a1">
<div class="infoblock infoblock-hidden">
<div class="infoblock__user-name"><strong>Alexander</strong></div>
<div class="infoblock__date">21 August 2022</div>
<div class="infoblock__text">Comportable table</div>
</div>
<img src="girl1.jpg" class="reviews__photo">
</div>
<div class="customers__photo" data-id="a1">
<div class="infoblock infoblock-hidden">
<div class="infoblock__user-name"><strong>John</strong></div>
<div class="infoblock__date">22 August 2022</div>
<div class="infoblock__text">Expandable table</div>
</div>
<img src="girl2.jpg" class="reviews__photo">
</div>
<div class="customers__photo" data-id="a1">
<div class="infoblock infoblock-hidden">
<div class="infoblock__user-name"><strong>Edward</strong></div>
<div class="infoblock__date">23 August 2022</div>
<div class="infoblock__text">Collapsable table</div>
</div>
<img src="girl3.jpg" class="reviews__photo">
</div>
Related
The goal I'm after is trimming the first character from each of the link's text.
<div class="item">
<div>
1One
</div>
</div>
<div class="item">
<div>
2Two
</div>
</div>
I've tried simply substring and slice:
$('.item div a').substring(1);
$('.item div a').slice(1);
But after some fiddling, I've yet to get it to work. Then I attempted to use .text(), but it instead collects all the outputs from each link and replaces them, not individually. Which makes it so the end result is all the link text are the same.
var input = $('.item div a').text();
var output = input.substring(1);
$('.item div a').text(output);
Is there an alternative to using .substring() and .slice() to get this to work? (Also, I'm unable to alter the original HTML for this scenario)
Is this what you need?
[...document.querySelectorAll('.item div a')].forEach(a=>
a.innerHTML=a.innerHTML.substring(1))
<div class="item">
<div>
1One
</div>
</div>
<div class="item">
<div>
2Two
</div>
</div>
And jquery version:
$('.item div a').each(function(){
$(this).text($(this).text().substring(1));
});
var links = document.getElementsByTagName('a');
for(let i = 0;i<links.length;i++){
var string = links[i].innerHTML;
string=string.substring(1);
console.log(string);
}
<div class="item">
<div>
1One
</div>
</div>
<div class="item">
<div>
2Two
</div>
</div>
Something like this?
$(function() {
$("a").each((idx,el) => el.innerHTML = el.innerHTML.substring(1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<div>
1One
</div>
</div>
<div class="item">
<div>
2Two
</div>
</div>
Use text(function) to iterate each instance.
The problem you had is jQuery slice() is for filtering the $(selector) collection and there is no jQuery substring() method
$('.item a').text((i, curr) => curr.slice(1))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<div>
1One
</div>
</div>
<div class="item">
<div>
2Two
</div>
</div>
I'm mapping over an array to display data in the browser using template literals.
With each rendered object, a comma shows up in the browser and also when I inspected the element. I did some reading and I think it is because I haven't joined the array, which I am trying to do but I am not understanding where to add it in the basic function I have.
Here is the code:
let synopsisRender = synopsisContent.map((item)=>{
return`
<div class="synopsis" key=${item.id}>
<div class="synopsisHeader">
<div class="cover">
<img src="${item.poster}" alt="${item.altText}">
</div>
<div class="synopsisTitle">
<h1>${item.title}</h1>
</div>
</div>
<div class="synopsisText">
<h2>${item.subTitle}</h2>
<p>${item.synopsisText}</p>
</div>
</div>
`
});
document.getElementById("synopsis").innerHTML = synopsisRender;
After mapping, but before assigning to innerHTML.
let synopsisRender = synopsisContent.map((item)=>{
return`
<div class="synopsis" key=${item.id}>
<div class="synopsisHeader">
<div class="cover">
<img src="${item.poster}" alt="${item.altText}">
</div>
<div class="synopsisTitle">
<h1>${item.title}</h1>
</div>
</div>
<div class="synopsisText">
<h2>${item.subTitle}</h2>
<p>${item.synopsisText}</p>
</div>
</div>
`
}).join(''); //Here...
document.getElementById("synopsis").innerHTML = synopsisRender; //...Or here, `synopsisRender.join('')`
I have the below html structure and I'm trying to get the text of h tags and add as a data- attribute in the corresponding tags:
<div class="content">
<div class="body">
<h1>foo</h1>
<p>para-test1</p>
<p>para-test2</p>
<div class="link">
anchor1
anchor2
anchor3
</div>
</div>
</div>
<div class="content">
<div class="body">
<h1>bar</h1>
<p>para-test3</p>
<div class="link">
anchor4
</div>
</div>
</div>
So 'foo' should be set as a data attribute value for anchor 1,2,3 elements and
'bar' should be set as a data attribute value for anchor 4. Something like this:
<a data-custom="foo" href="#">anchor1</a>
<a data-custom="foo" href="#"">anchor2</a>
<a data-custom="foo" href="#">anchor3</a>
<a data-custom="bar" href="#">anchor4</a>
I tried to iterate over the elements and I'm struck at the second loop.
$(".content .body").each(function() {
$(this).find(".link").attr("data-hN", $(this).next(":header").text());
});
You have an extra double quote two times in your HTML. But, fixing that and foregoing JQuery (which is overkill for such a trivial task), see comments inline below:
// Loop over the links
document.querySelectorAll("div.link > a").forEach(function(item){
// Set the current link data-custom attribute to the nearest
// .body ancestor and the first heading element within that text
item.dataset.custom = item.closest(".body").querySelector(":first-child").textContent;
console.log(item);
});
<div class="content">
<div class="body">
<h1>foo</h1>
<p>para-test1</p>
<p>para-test2</p>
<div class="link">
anchor1
anchor2
anchor3
</div>
</div>
</div>
<div class="content">
<div class="body">
<h1>bar</h1>
<p>para-test3</p>
<div class="link">
anchor4
</div>
</div>
</div>
I have a pattern like that:
<section>
<div data-id="39"></div>
<div data-id="31"></div>
<div data-id="57"></div>
<div data-id="10"></div>
<div data-id="27"></div>
<div data-id="5"></div>
<div data-id="89"></div>
</section>
That contains some data that are live updated via AJAX. Sometimes, it may happen to receive from the server a data updated with the same id of another one in the section, and since it's the same id, I need to remove the old data to avoid multiple datas and keep just the updated one.
For example, I receive an update with data-id 27 and I insert at the top:
<section>
<div data-id="27"></div>
<div data-id="39"></div>
<div data-id="31"></div>
<div data-id="57"></div>
<div data-id="10"></div>
<div data-id="27"></div>
<div data-id="5"></div>
<div data-id="89"></div>
</section>
After inserted it, how can I do a check that if 27 is already available in the section (so the last iteration), remove it from the section? Basically removing all the data with the same id and keep just the one at the top.
Not very inspired at the moment but with the amount of info you game us i made this example with jquery. It can be done also just with plain javaScript if needed
$('div').each(function() {
dataId = $(this).data('id');
otherDataId = $(this).siblings().data('id');
if (otherDataId === dataId) {
$(this).hide()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div data-id="27">27</div>
<div data-id="39">1</div>
<div data-id="31">2</div>
<div data-id="57">3</div>
<div data-id="10">4</div>
<div data-id="27">27</div>
<div data-id="5">5</div>
<div data-id="89">6</div>
</section>
You could also try creating a function to remove the element with the specific data-id value you want like this:
const removeItems = (number) => {
let elements = document.querySelectorAll(`div[data-id="${number}"]`);
elements.forEach((e) => { e.remove() });
};
And then to remove elements with data-id=27 you can do: removeItems(27);.
Take a look:
const removeItems = (number) => {
let elements = document.querySelectorAll(`div[data-id="${number}"]`);
elements.forEach((e) => { e.remove() });
};
removeItems(27);
<section>
<div data-id="27">27</div>
<div data-id="39">39</div>
<div data-id="31">31</div>
<div data-id="57">57</div>
<div data-id="10">10</div>
<div data-id="27">27</div>
<div data-id="5">5</div>
<div data-id="89">89</div>
</section>
document.querySelector(`[data-id=${myDataId}]`).remove();
I parsed an entire HTML page into an ASTNode.
Snippet of it looks like this:
<div id="buildings-wrapper">
<div id="building-info">
<h2><span class="field-content">Britney Spears' House</span></h2>
<div class="building-field">
<div class="field-content">9999 Hollywood Blvd</div>
</div>
<div class="building-field">
<div class="field-content">Building Hours: Mon. 07:00-23:00 Tue.-Fri. 06:30-22:00, Sat. 07:30-18:00, Sun. 12:00-18:00 Holidays - Closed</div>
</div>
<div class="building-field">
<div class="field-content">Locate on the stars map</div>
</div>
</div>
<div id="building-image">
<div class="field-content"><img src="../../../../ssc.adm.britneyspears.com/classroomservices/image/viewimage?userEvent=ShowBuildingImage&buildingID=britneyspears" alt="Image of BritneySpears"></div>
</div>
</div>
I need to grab some information from the page, like the name of the building and its address. How do I do that with an ASTNode? I've read the XML DOM tutorials and they suggest using document.getElementbyId and the ilk but I can't get to those functions from an ASTNode. I think I'm missing something simple but what's the easiest way to access the values I need?