I've been reading several questions that appear to be similar but didn't find one that resolve my issue or that the suggested solution solved my problem
I have the following html:
<div id="template">
<div class="section1" id="sec1">
<div class="content">
<img id="sec1-is" *ngIf="!tstEnded" src="assets/images/r1.png" srcset="assets/images/r1#2x.png 2x,assets/images/r1#3x.png 3x" >
<img id="sec1-if" *ngIf="tstEnded" src="assets/images/r2.png" srcset="assets/images/r2#2x.png 2x,assets/images/r2#3x.png 3x" />
<div class="audio-controls">
<button *ngIf="do1()" (click)="act1()" class="control-btn r1-btn" [ngClass]="{'disabled':!r1Enabled()}"></button>
<button *ngIf="do2()" (click)="act2()" class="control-btn r2-btn" [ngClass]="{'disabled':!r2Enabled()}"></button>
</div>
<div class="test-wrapper">
<span class="test-line">
{{eta}}
</span>
</div>
<div class="test-wrapper">
<div class="test" tst testType="R" (tstGo)="go($event)"></div>
</div>
</div>
</div>
<div class="section2" id="sec2" style="background-image: linear-gradient(to top, #d0f6f6, rgba(255, 255, 255, 0));">
<div class="content">
<div *ngIf="ended">
<img *ngIf="!open" class="case1" (click)="case1()" src="assets/images/case1c.svg" />
<img *ngIf="open" class="case1" src="assets/images/case1.svg" />
</div>
</div>
</div>
</div>
After cloning the template I wish to change the id attribute of section 1 and 2 as well as the src and srcset of section1 images sec1-is & sec1-if
and change the
let itm = document.getElementById("template");
let cln = itm.cloneNode(true);
How can I get a specific "nested" element without iterating over all the children and grandchildren of template, searching for the correct tag?
Hope this help:
var origin, clone, item;
origin = document.getElementById("template");
clone = origin.cloneNode(true);
item = clone.querySelector("#sec1");
item.setAttribute("id", "sec2");
Overall:
Use querySelector on your clone then setAttribute to update.
Since your img already has id so you can query directly with #sec1-is.
But in general, with querySelector you can have the query string like #sec1 img. Similar to css selector
You can learn more here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
You can try getting the specific using querySelector() and querySelectorAll() from the cloned element.
Demo:
let itm = document.getElementById("template");
let cln = itm.cloneNode(true);
//get element with .section1
let section1 = cln.querySelector('.section1');
//set id
section1.id = 'sec123'
console.log(section1);
//get element with img in .section1
let img = section1.querySelectorAll('.content img');
//set src of first image
img[0].src = '../test';
//set srcset of first image
img[0].srcset = '../test/test';
console.log(img[0]);
//set src of second image
img[1].src = '../test2';
//set srcset of second image
img[1].srcset = '../test2/test';
console.log(img[1]);
<div id="template">
<div class="section1" id="sec1">
<div class="content">
<img id="sec1-is" *ngIf="!tstEnded" src="assets/images/r1.png" srcset="assets/images/r1#2x.png 2x,assets/images/r1#3x.png 3x" >
<img id="sec1-if" *ngIf="tstEnded" src="assets/images/r2.png" srcset="assets/images/r2#2x.png 2x,assets/images/r2#3x.png 3x" />
<div class="audio-controls">
<button *ngIf="do1()" (click)="act1()" class="control-btn r1-btn" [ngClass]="{'disabled':!r1Enabled()}"></button>
<button *ngIf="do2()" (click)="act2()" class="control-btn r2-btn" [ngClass]="{'disabled':!r2Enabled()}"></button>
</div>
<div class="test-wrapper">
<span class="test-line">
{{eta}}
</span>
</div>
<div class="test-wrapper">
<div class="test" tst testType="R" (tstGo)="go($event)"></div>
</div>
</div>
</div>
<div class="section2" id="sec2" style="background-image: linear-gradient(to top, #d0f6f6, rgba(255, 255, 255, 0));">
<div class="content">
<div *ngIf="ended">
<img *ngIf="!open" class="case1" (click)="case1()" src="assets/images/case1c.svg" />
<img *ngIf="open" class="case1" src="assets/images/case1.svg" />
</div>
</div>
</div>
</div>
Related
I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.
Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.
HTML:
$('.blog-post-image').each(function() {
var $me = $(this);
var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');
$me.attr('src', blogPostImage);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
.blog-post-image doesn't have any siblings. Siblings are immediate children of the same parent element, but there are no other elements in the div containing <img class="blog-post-image" />.
You need to go up to the .blog-header to get its sibling.
Also, instead of using .each(), you can use a function in .attr(). It automatically loops, and assigns the return value to the attribute.
$('.blog-post-image').attr('src', function() {
return $(this).closest('.blog-header').siblings('.blog-content').find('img').attr('src');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
Two things:
1.) .blog-content is not a sibling of .blog-post-image
2.) .children() only looks one level deep to find the element you are looking for.
What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.
$('.blog-post-image').each(function() {
var me = $(this);
var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
me.attr('src', blogPostImage);
});
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">15/6/2021</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
</div>
</div>
</body>
I want to show a modal popup when the user clicked a button, but it keeps adding to the innerHTML
<div class="popup-container hide">
<div class="popup-wrapper">
<!-- <div class="popup-content"> -->
<!-- </div> -->
<div class="order-container">
<div class="value-container">
<button class="minusBtn"><img src="icon/minus.png" alt="" width="30px"></button>
<div class="value">1</div>
<button class="plusBtn"><img src="icon/plus.png" alt="" width="30px"></button>
</div>
<button class="orderBtn">Add To Cart</button>
</div>
</div>
</div>
Here I create a new div and insert it into the parent, and showing the clicked data with literal template
let content = document.createElement('div');
content.classList.add('popup-content');
content.innerHTML = `
<div class="popup-image">
<img src="mcd/${item.img}" alt="">
</div>
<div class="popup-name">
${item.name}
</div>
<div class="popup-price">
${item.price}
</div>
`;
let wrapper = document.querySelector('.popup-wrapper');
let orderContainer = document.querySelector('.order-container');
wrapper.insertBefore(content, orderContainer);
You need to remove all existing .popup-content elements before you insert a new one if you want only one to appear.
document.querySelectorAll('.popup-content').forEach(el => el.remove());
let content = document.createElement('div');
...
Created 3 dynamic divs(sea_p,sea_p_div,div_btns), inside the third(div_btns) created 2 buttons
how can i change the text inside these dynamic buttons before adding to body?
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
$('body').append(div)
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
p.find(".req_check1").html('New Text');
p.find(".req_check2").html('New Text 2');
$('body').append(div)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Please try this.
window.onload = function() {
$(".req_check1").html('New Text');
$(".req_check2").html('New Text 2');
}
Thank you.
You can use text() method of jQuery, on the jQuery object of button whose text you want to change.
NOTE : Use it just after appending the p tag to the body.
var buttonWrap = $('.sea_p .div_btns button');
buttonWrap.eq(0).text("Text for button 1");
buttonWrap.eq(1).text("Text for button 2");
I have the following html:
<div class="avatars">
<div class="avatar">
<div>
<svg data-jdenticon-value="Oamar Kanji"></svg>
</div>
<h3 class="name">Oamar Kanji</h3>
</div>
<div class="avatar">
<div>
<svg data-jdenticon-value="Oamar Kanji"></svg>
</div>
<h3 class="name">Jane Doe</h3>
</div>
</div>
I am getting a specific element like so and trying to display it inside another element:
<div id="display-here"/>
<script>
let someAvatar = document.getElementsByClassName("avatar").item(0)
document.getElementById('display-here').innerHTML = someAvatar
</script>
This does not work..
You need to use cloneNode
More info here: link
let someAvatar = document.getElementsByClassName("avatar").item(0)
console.log(someAvatar);
var clonedElem = someAvatar.cloneNode(true);
document.getElementById("display-here").appendChild(clonedElem);
<div class="avatars">
<div class="avatar">
<div>
<svg data-jdenticon-value="Oamar Kanji"></svg>
</div>
<h3 class="name">Oamar Kanji</h3>
</div>
<div class="avatar">
<div>
<svg data-jdenticon-value="Oamar Kanji"></svg>
</div>
<h3 class="name">Jane Doe</h3>
</div>
</div>
<div id="display-here">
</div>
Use the following line inside script:
let someAvatar = document.getElementsByClassName("avatar").item(0).innerHTML;
instead of
let someAvatar = document.getElementsByClassName("avatar").item(0)
Now someAvatar will have the HTML content inside of the div. Previously your were having the whole div HTML node.
I am new to jQuery and am trying to write a script that will run through a menu list and display the correct background image based on the menu item. The menu list is going to be randomly populated so a script is necessary to load the correct image.
The problem is that the attribute where I am able to see which item the menu belongs to is not on the list item itself but on a div contained inside the list item. My question is is it possible to select a child element of the already selected element ?
E.g (the menuli a segment)
$(document).ready( function() {
$(menuli).each( function(index) {
$itemnumber = $(menuli a).attr("href");
switch($itemnumber) {
case 1:
$(this).css("background-image", "image01.jpg");
break;
}
});
});
This is more or less the script I am trying to get, where each list item is iterated through and depending on the href of the link inside the list item a background image is set to that list item.
EDIT
Here is my html:
<div id="divMenuSportGSXSports">
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=468&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl00_lnkSport" href="/Sport/Groups.aspx?IDSport=468&Antepost=0">
<span title="SOCCER">SOCCER</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=520&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl01_lnkSport" href="/Sport/Groups.aspx?IDSport=520&Antepost=0">
<span title="BASEBALL">BASEBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=544&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl02_lnkSport" href="/Sport/Groups.aspx?IDSport=544&Antepost=0">
<span title="CRICKET">CRICKET</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=525&Antepost=0&Tema=Supabets)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl03_lnkSport" href="/Sport/Groups.aspx?IDSport=525&Antepost=0">
<span title="BASKETBALL">BASKETBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=534&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl04_lnkSport" href="/Sport/Groups.aspx?IDSport=534&Antepost=0">
<span title="ICE HOCKEY">ICE HOCKEY</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=523&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl05_lnkSport" href="/Sport/Groups.aspx?IDSport=523&Antepost=0">
<span title="TENNIS">TENNIS</span>
</a>
</div>
</div>
</div>
Yes you can, use find
var parentElement = $('#someElement');
var childElement = parentElement.find('.child'); //where .child should be your child selector
Where as example code is not clear, I just gave answer to your question.
try to change this:
$(this).css("background-image", "image01.jpg");
to this:
$(this).children("div").css("background-image", "image01.jpg");
If you want to target the direct child of the element, better to use children() than find()
Please refer to this: What is fastest children() or find() in jQuery?