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>
Related
I have the following function:
// Go to the previous item
$(".owl-prev-custom").click(function () {
$(".owl-carousel-timeline .item.item-year-active")
.removeClass("item-year-active")
.parent()
.prev()
.children()
.addClass("item-year-active");
var theHash = $(".owl-carousel-timeline .item.item-year-active").attr(
"data-hash"
);
});
With this html:
<div class="owl-carousel owl-carousel-timeline">
<div class="owl-item">
<div class="item" data-hash="2006">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="2009">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="2010">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="2013">
<div class="carousel-card"></div>
</div>
</div>
<div class="owl-item">
<div class="item item-year-active" data-hash="2013-2">
<div class="carousel-card"></div>
</div>
</div>
</div>
<div class="owl-nav owl-nav-timeline">
<div class="owl-prev-custom"></div>
<div class="owl-next-custom"></div>
</div>
The problem I have is that the click event, when reaches the first item .owl-item:first (or last item .owl-item:last), does not stop and the class .item-year-active disappears since it goes to an item before the first owl-item.
I would like to know how to stop my function in the first .owl-item and in the last .owl-item so that this does not happen.
Please let me know if I explain well, to give more details, English is not my primary language :)
Check whether the active element is the first element, and skip it when you reach the end.
// Go to the previous item
$(".owl-prev-custom").click(function() {
if (!$(".owl-carousel-timeline .item.item-year-active").is(".owl-carousel-timeline .item:first")) {
$(".owl-carousel-timeline .item.item-year-active")
.removeClass("item-year-active")
.parent()
.prev()
.children()
.addClass("item-year-active");
}
var theHash = $(".owl-carousel-timeline .item.item-year-active").attr(
"data-hash"
);
});
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 a div which I want to surround with an <a href>. I have the jQuery to add the <a href> after the div but I struggle to set it before and close it after the div.
This is the jQuery code I have:
$('.box_service').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
It results in this HTML:
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
However my goal is this structure:
<div class="row">
<a href="example.com">
<div class="box_service">
<div class="inner-row"></div>
</div>
</a>
</div>
I can't enter the div before because there are more boxes in this row so I would add the <a href> to everything in there
The issue is due to your call to contents() which means you're wrapping the elements inside .box_service, not that element itself. Remove that method call.
Also note that each() is redundant, you can do what you require in a single line:
$('.box_service').wrap('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
Box service #1
<div class="inner-row">Inner row #1</div>
</div>
</div>
<div class="row">
<div class="box_service">
Box service #2
<div class="inner-row">Inner row #2</div>
</div>
</div>
.content will wrap the contents of your div, you want to wrap the div with <a> so call wrap on the div not on contents.
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<div class="inner-row"></div>
</div>
</div>
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
You just need to remove contents() in between $(this).wrap() because contents() mean that you are wrapping the children of $(this).
Remove .contents() in order to wrap around each element with the class box-service:
$('.box_service').each(function() {
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
$('.box_service').wrap('');
I have got this html code
<div class="chatp">
<div class="chatpart">
</div>
</div>
And in my jquery i am trying to append
<div class='headchat'>
</div>
Inside chatp but it appends it after chatpart and here is what happens
<div class="chatp">
<div class="chatpart">
</div>
<div class='headchat'>
</div>
</div>
What i want is
<div class="chatp">
<div class='headchat'>
</div>
<div class="chatpart">
</div>
</div>
You can use prepend to append in start.
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
Reference: https://api.jquery.com/prepend/
Example:
<div class="chatp">
<div class="chatpart">
</div>
</div>
<script>
$('.chatp').prepend('<div class="headchat"></div>');
</script>
Use Jquery prepend function $
$(".chatp").prepend("<div class='headchat'> </div");
I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"
<script>
$(document).ready(function(){
$('.plink').hide();
$('.project').mouseover(function(){
$(this).next('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).next('.plink').fadeOut(200);
});
});
</script>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
<div class="title">test2</div>
</div>
You can use find() instead of next()...
$(this).find('.plink').fadeIn(400);
because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (i.e. it is check to see if the next .project div matches the .plink selector)
I would go the FIND route like musefan suggested. Here is the solution code:
http://jsfiddle.net/bx7YC/
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test2</div>
</div>
$('.plink').hide();
$('.project').mouseover(function(){
$(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).find('.plink').fadeOut(200);
});
I replaced the broken img links with simple text for the jsfiddle.