I want to add a icon next to some link text that makes an accordion expand and collapse. The text already changes from 'See more' to 'See less'. see the working demo - http://bootply.com/106271
So adding:
<span class="glyphicon glyphicon-chevron-up"></span>
stops the text change work.
Here is the broken version trying to add the icon: http://bootply.com/106270
$(document).ready(function(){
$("#morebtn").click(function(){
$(this).html($(this).html() == "See more <span class="glyphicon glyphicon-chevron-up"></span>" ? "See less" : "See more <span class="glyphicon glyphicon-chevron-up"></span>");
});
});
You have mismatching quotes:
"See more <span class="glyphicon glyphicon-chevron-up" ... "
^ ^ ^ ^
To fix this, either use single quotes or escape the double quotes:
'See more <span class=" ... " ... '
"See more <span class=\" ... \" ... "
Working Bootply Demo.
Use .indexOf() to check the availability of a particular word. And also keep in mind that dont use " inside of a string which is being constructed by " instead use '
Try,
$(document).ready(function(){
$("#morebtn").click(function(){
$(this).html($(this).html().indexOf("See more") > -1 ? "See less" : "See more <span class='glyphicon glyphicon-chevron-up'></span>");
});
});
Overriding the whole web site html content with
$(this).hmtl("");
Isn´t a good idea.
Instead of using that, you doing it like this:
$(document).ready(function()
{
$("#morebtn").click(function()
{
$("#morebtn").val($("#morebtn").val().indexOf("See more") === 1 ?
$("#morebtn").val("See less")
: $("#morebtn").val('See more <span class="glyphicon glyphicon-chevron-up"></span>'));
}
);
}
);
It is also worth to mention, that this line could not work:
"See more <span class="glyphicon glyphicon-chevron-up"
Your JavaScript console should show up a syntax error for this. Because you can´t use implicit the same quotes withou escaping the inner ones. You have to escape your inner double quotes like this:
class=\"glyphicon glyphicon-chevron-up\"
OR: I highly recommend you to use the alternative method with single and double quotes (the order doesn´t matter), because it´s easier readable for human beings. It could be single or double first):
'See more <span class="glyphicon glyphicon-chevron-up"></span>'
// or:
"See more <span class='glyphicon glyphicon-chevron-up'></span>"
Hopefully this has helped you.
Related
I am using WordPress so i could only change the HTML through custom JS.
This is the HTML
<li class="submit-listing"><i class="fa fa-plus"></i> Submit Listing</li>
I already tried all of these:
$(".submit-listing a").html("<i class="fa fa-plus"></i> Post You Ad");
$(".submit-listing a").html(function(){
$(this).find("i").addClass("fa fa-plus");
this.nodeValue = "Post Your Ad";
});
but none of these work. I also tried this : How can I get, manipulate and replace a text node using jQuery?, but nothing seems to work with me.
Thanks anyway.
Using a replace works:
$('.submit-listing a').html(function (i, el) {
return el.replace('Submit Listing', 'Post your ad');
});
DEMO
The first line of your code should be,
$(".submit-listing a").html("<i class='fa fa-plus'></i> Post You Ad");
Change the double quotes to single quotes because JavaScript treats them as closing strings.
Challenge : Our users have access to an "contentEditable" DIV in which a JS library inserts HTML in it. Here's how we thought the HTML should show up in the contentEditable :
<span class="stylish-blue-button">
<span style="display:none;">[data-user="12345" data-userId="678910"]</span>
John Smith
<span style="display:none;">[/]</span>
</span>
...Blablabla some other text...
We hand over this HTML to PHP, where we execute strip_tags(). This should give us :
[data-user="12345" data-userId="678910"]John Smith[/] ...Blablabla some other text...
Question : When rendering the text on the page, we were wondering if there was a secure/reliable way to have the above custom markdown converted to (before handing it to Handlebars.js) :
<span class="stylish-blue-button" data-user="12345" data-userId="678910">John Smith</span> ...Blablabla some other text...
Why : This assures us that the user generated content was handled safely, all while keeping the user generated markdown in the contentEditable "pretty" ("stylish-blue-button" class).
If you have any suggestions to make this whole process simpler, we're opened to changing our markdown's format.
Thank you so much!
You could use a regex like this:
$string = '<span class="stylish-blue-button">
<span style="display:none;">[data-user="12345" data-userId="678910"]</span>
John Smith
<span style="display:none;">[/]</span>
</span>
...Blablabla some other text...';
echo preg_replace('~\[(data-user="\d+")\h+(data-userId="\d+")\]\s*(.+?)\s*\[/\]\s*(.*)~s', '<span $1 $2>$3</span>$4', trim(strip_tags($string)));
Here's a regex101 demo explaining exactly what that regex is doing. If you have a particular questions please ask.
Output:
<span data-user="12345" data-userId="678910">John Smith</span>...Blablabla some other text...
A few quick regex notes.
* is a quantifier meaning zero or more of the preceding character.
+ is a quantifier meaning one or more (aka it is required) of the preceding character.
\s is a whitespace character.
\h is a horizontal space.
. is any single character.
\d is a single number (0-9).
() are capturing groups they capture into $1, $2 etc. in the order they were found.
Looking at that regex again a quick note: This \[/\] is read as literal [/]. The backslashes are escaping the [] which otherwise would create a character class (meaning only the / character would be allowed there).
Multi-instances:
$string = '<span class="stylish-blue-button">
<span style="display:none;">[data-user="12345" data-userId="678910"]</span>
John Smith
<span style="display:none;">[/]</span>
</span>
...Blablabla some other text...
<span class="stylish-blue-button">
<span style="display:none;">[data-user="12345" data-userId="678910"]</span>
John Smith
<span style="display:none;">[/]</span>
</span>
...Blablabla some other text...
<span class="stylish-blue-button">
<span style="display:none;">[data-user="12345" data-userId="678910"]</span>
John Smith
<span style="display:none;">[/]</span>
</span>
...Blablabla some other text...';
echo preg_replace('~\s*\[(data-user="\d+")\h+(data-userId="\d+")\]\s*(.+?)\s*\[/\]\s*~s', '<span $1 $2>$3</span>', trim(strip_tags($string)));
Output:
<span data-user="12345" data-userId="678910">John Smith</span>...Blablabla some other text...<span data-user="12345" data-userId="678910">John Smith</span>...Blablabla some other text...<span data-user="12345" data-userId="678910">John Smith</span>...Blablabla some other text...
For looser Ids just change the \d+ to [a-zA-Z0-9 ]+.
So:
preg_replace('~\s*\[(data-user="\d+")\h+(data-userId="[a-zA-Z0-9 ]+")\]\s*(.+?)\s*\[/\]\s*~s'
I'm trying to get the previous span before the current, my code doesn't work.
<span class="badge votes">0</span>
<span data-vote="up" data-count="0" class="glyphicon glyphicon-thumbs-up"></span>
<span data-vote="down" data-count="0" class="glyphicon glyphicon-thumbs-down"></span>
What I want is when i click the span with class="glyphicon glyphicon-thumbs-up" and class="glyphicon glyphicon-thumbs-down" to get the value in span with class="badge votes"
here's my jQuery code
alert($(this).parent().find('span').text());
or
alert($(this).prevAll('.votes:first').text());
$('.glyphicon').click(function(evt) {
alert($(this).parent().prevAll('.badge.votes').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="badge votes">0</span>
<span data-vote="up" data-count="0" class="glyphicon glyphicon-thumbs-up">Up</span>
<span data-vote="down" data-count="0" class="glyphicon glyphicon-thumbs-down">Down</span>
Your parent().find('span') will go up to <a>, then look for a span in its children. prevAll('.votes:first') looks for sisters of the current span (which has no sisters). In both cases, you are stuck one level below from where you want to be.
You could use jquery's "closest" function to grab the span you are looking for like so:
$('span').on('click', function (ev) {
alert($(ev.currentTarget).closest('.badge.votes').html());
});
fiddle: https://jsfiddle.net/8xj3mt7k/
You could do it like this:
$(this).parent().siblings('.badge.votes');
It will select the sibling of <a> with badge votes.
span selector can also work.
Here's a dirty little trick:
$( "#up-vote, #down-vote" ).on( "click", (function( votesSpan ) {
return function() {
alert( votesSpan.text() )
}
}( $("span.badge.votes") )) )
Fiddle: http://jsfiddle.net/z4sbhmn9/
This can be taken even further and turn into a utility method.
Some of these answers are flat out wrong, but all are too complicated.
.closest('classname') will return itself, so this is wrong.
.parent() will return the PARENT class, so this is wrong.
The code you're looking for is $(this).prevAll('span:first').text()
or for this specific example, $(this).prev().prev().text();
I tested both of these, and they work. Just in general, think of it this way - you're navigating through HTML elements. Look in your browser console at the nodes and you'll see the page hierarchy. .next() and .prev() return the next sibling. .find() searches through children.
I have this HTML code:
<span class="apparatus type-substantive">
<span class="reading HQ1">I there’s the </span>
<span class="reading TTQ1 BQ1">ay, there's the </span>
<span class="reading HQ2 BQ2 BF BE HaF MW GBE HJ DB4 BR PE TW TS TTQ2 TTF RSM"> that is the </span>
</span>
And I want to inject "<" and ">" before and after the one with class HQ2 (third span), and { and } before and after the one which has class HQ1 (first span), so I've done this:
$('span.HQ2').prepend('<span class="pended"><</span>').append('<span class="pended">&t;</span>').siblings('.HQ1').prepend('<span class="pended">{</span>').append('<span class="pended">}</span>').css('color','#217b26');
The problem is that the result is not the one I expected, because the second append and prepend are not working, these only work if I remove the span tags and leave the "{" and "}" alone. The .css() works as expected, so the selection is done properly with .siblings(). I think the problem may rely in the result that .siblings() is giving me, maybe it does not accept prepending and appending HTML tags or something. I don't know...
Could you enlighten me?
Thank you very much.
try '\' before greater than and less than marks. this will ensure they are interpreted as text:
$('span.HQ2').prepend('<span class="pended">\<</span>').append('<span class="pended">\></span>').siblings('.HQ1').prepend('<span class="pended">{</span>').append('<span class="pended">}</span>').css('color', '#217b26');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="apparatus type-substantive">
<span class="reading HQ1">I there’s the </span>
<span class="reading TTQ1 BQ1">ay, there's the </span>
<span class="reading HQ2 BQ2 BF BE HaF MW GBE HJ DB4 BR PE TW TS TTQ2 TTF RSM"> that is the </span>
</span>
Today I've found out why this wasn't working... apparently I forgot I had a piece of jquery later in the same code preventing me from doing this... I've been fooled by my own code. :/
Thank you all, anyways.
I am using the bxslider carousel that generates a slider, as part of the settings I have:
...
nextText:"Next",
prevText:"Prev",
...
So the next button in the slider has the text "Next" (and same thing for the previous button). But instead of the text, I want to add a span with an image. How can I change that so it displays something like <span class="glyphicon glyphicon-search"></span> instead of "Next" or "Prev" text?
Thanks in advance
The website link
I have solved the problem by means of this link. I am sorry for this weak question. I have added like that;
nextText: '<span class="glyphicon glyphicon-search"></span>'
If you want to add the tag to an existing HTML tag, such as a div with id myDiv:
getElementById('myDiv').innerHTML = '<span class="glyphicon glyphicon-search"></span>';
or
getElementById('myDiv').appendChild('<span class="glyphicon glyphicon-search"></span>');