How do i add a text to all 5 spans that share the same id.
the html goes:
<div class="body">
<form>
<span id = "test" ></span>
<span id = "test" ></span>
<span id = "test" ></span>
<span id = "test" ></span>
<span id = "test" ></span>
</form>
</div>
The js:
function check_aff_payment(elem){
$(elem).find('#test').each(function(){
$("#test").text("*");
});
}
ID's on a HTML page are required to be unique.
Try using class instead
<div class="body">
<form>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
</form>
</div>
function check_aff_payment(elem){
$(elem).find('.test').each(function(){
$(this).text("*");
});
}
Check Fiddle
Related
I want to get all the span data attribute inside the p element so that I can compare the values/text of my hidden p element
<div>
<ol class="edit-list">
<li class="edit">
<p class="hidden answer" data-answer="He loves fish tacos">He loves fish tacos</p>
<p>
<span data-original="Brad">He</span>
<span data-original="loves">loves</span>
<span data-original="fish">fish</span>
<span data-original="tactos">tactos</span>
</p>
</li>
<li class="edit">
<p class="hidden answer" data-answer="I love learning!">I love learning!</p>
<p>
<span data-original="I">I</span>
<span data-original="love">love</span>
<span data-original="learning!">learning!</span>
</p>
</li>
<li class="edit">
<p class="hidden answer" data-answer="I ate dinner">I ate dinner</p>
<p>
<span data-original="I">I</span>
<span data-original="ate">ate</span>
<span data-original="dinner">dinner</span>
</p>
</li>
</ol>
<button id="validate" >Validate</button>
</div>
Here is my JavaScript code.
<script type="text/javascript">
$(function(){
var mismatch = false;
$('ol.edit-list li').each(function(){
var p_answer = $(this).find('p').attr('data-answer');
var c_annswer = $(this).find('p').has('span').children().attr('data-original'); // I canno get all the span inside the p;
if(p_answer !== c_answer){
mismatch = true;
break;
}
}
});
</script>
How can I click on a smiley / emoji from a list and place it in a input field? I can see in the Inspect Element Q (console log) that it is being clicked but I can not find a way to copy it to the input field.
HTML
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(event) {
// get selected item and place it in input field
};
You can get the clicked emoticon with event.target and add the textContent of that to the value of the input element.
I also added a check event.target != event.currentTarget to avoid all icons are inserted when you click on the parent but not on a child (emoticon). When your html content of the event handler gets more complicated then you probably want to add a class to all emoticon spans and check if the clicked element has that class.
function smileySelect(event) {
/*
event.target = the actually clicked element
event.currentTarget = the element that has the event handler
When they are not equal we know the click was on a child of the .emoji element.
Any child is valid since you only have the emoticon span elements inside the .emoji element.
*/
if (event.target != event.currentTarget) {
let smiley = event.target;
document.querySelector('#text').value += smiley.textContent;
}
};
<div id="wrapper">
<div class="bubble-container"></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
You can try something like:-
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="smileySelect(event.target.innerHTML)">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes" > 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(emoji) {
if (emoji.includes("span") == false)
document.getElementById("text").value += emoji;
};
I have many numbers of divisions in my HTML code. There are no ids or classes for any of the divs. This is my code
<div>
<span>
<a href="#">
link</a>
</span>
</div>
<div>
<span>
<span title=" title 1">
Some text written here
</span>
</span>
</div>
<div>
<span>
<span title="title 2">
Some other text written here
</span>
</span>
</div>
<div>
<span>
<a href="#">
some link
</a>
</span>
</div>
I want to get the text of innermost span inside divs, which have two nested spans and the innermost span should have a title such as
<div>
<span>
<span title="title 2">
Some other text written here
</span>
</span>
</div>
and also is it possible to remove such divs? Are there any functions in jquery to do it? thanks in advance
Since there's no other text inside, you can simply use .textContent on the outer divs and trim the result:
const texts = [];
document.querySelectorAll('div').forEach(div => {
if (
div.children[0].tagName !== 'SPAN' ||
div.children[0].children[0].tagName !== 'SPAN' ||
!div.children[0].children[0].hasAttribute('title')
){
return;
}
texts.push(div.textContent.trim());
// if you want to remove the divs afterwards:
div.remove();
});
console.log(texts);
<div>
<span>
<a href="#">
link</a>
</span>
</div>
<div>
<span>
<span title=" title 1">
Some text written here
</span>
</span>
</div>
<div>
<span>
<span title="title 2">
Some other text written here
</span>
</span>
</div>
<div>
<span>
<span>
some span without a title
</span>
</span>
</div>
<div>
<span>
<a href="#">
some link
</a>
</span>
</div>
You can target these elements with $('div > span > span'), and loop over them with .each().
You can get the text content with the .text() method, and delete the elements with .remove().
This can be seen in the following:
$('div > span > span').each(function() {
console.log($(this).text());
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>
link
</span>
</div>
<div>
<span>
<span title="title 1">Some text written here</span>
</span>
</div>
<div>
<span>
<span title="title 2">Some other text written here</span>
</span>
</div>
<div>
<span>
some link
</span>
</div>
No need for jQuery for this one and selected answer does not check for title attribute and does not remove he div (it removes the span):
const data = Array.from(
document.querySelectorAll("#content>div>span>span[title]")
).map(
span=>[span.parentElement.parentElement,span.textContent.trim()]
);
console.log(
"text content of element(s):",
JSON.stringify(
data.map(([x,text])=>text)
)
);
setTimeout(
()=>{
alert("before removing divs (check html)");
data.forEach(([div])=>div.remove());
},2000
)
<div id="content">
<div>
<span>
<a href="#">
link</a>
</span>
</div>
<div>
<span>
<span title=" title 1">
Some text written here
</span>
</span>
</div>
<div>
<span>
<span title="title 2">
Some other text written here
</span>
</span>
</div>
<div>
<span>
<a href="#">
some link
</a>
</span>
</div>
</div>
I have following HTML:
<article>
<a href="#" title="Title">
<span class="row first">
<span class="col">
<span class="articleTitle">Article title</span>
<span class="row">
<span class="tel">12345</span>
<span class="mail">test#domain.com</span>
</span>
</span>
<span>
<span class="articleFlag flagNone"></span>
</span>
</span>
</a>
</article>
<article>
<a href="#" title="Title">
<span class="row first">
<span class="col">
<span class="articleTitle">Article title</span>
<span class="row">
<span class="tel">12345</span>
<span class="mail">test#domain.com</span>
</span>
</span>
<span>
<span class="articleFlag flagRed"></span>
</span>
</span>
</a>
</article>
And now I would like to change the background-color from the span with class 'articleTitle' to red, if the class 'flagNone' is set in this article. It should only change in this article not in the following one.
I tried this:
$(document).ready(function() {
if ($('.articleFlag.flagNone')) {
$('.articleFlag.flagNone').closest('.articleTitle').css("background", "red");
}
});
but it doesn't work. Any ideas?
Hello Please check this Demo
$(document).ready(function() {
if ($('.articleFlag.flagNone').length>0) {
$('.articleFlag.flagNone').closest('.row').find('.articleTitle').css("background-color", "red");
}
});
I think it will help you
Use jQuery's :has() selector (demo)
$(document).ready(function() {
if ($('.articleFlag.flagNone')) {
$('.row:has(.flagNone) .articleTitle').css("background", "red");
}
});
Closest traverse up the dom tree, that is the reason your selector doesn't work
try below js code
if ($('.articleFlag.flagNone')) {
$('.articleFlag.flagNone').parents('.row:eq(0)').find('.articleTitle').css("background", "red");
}
I am trying to get product name in alert box when either image or link is clicked on product page. But there is also one buy now button available which is also currently giving the popup alert if it is clicked. I want to exclude it using jquery. Here is what I am going
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".item").click(function (event) {
var href = $('a', this).attr("href");
var target = $('a', this).attr("target");
var text = $(this).find('.product-name').text();
event.preventDefault();
alert(text);
setTimeout(function () {
window.open(href, (!target ? "_self" : target));
}, 300);
});
});
</script>
<li class="item">
<a href="product1.php" title="Sample Product Name" class="product-image">
<span class="sale-item">Sale!</span>
<div class="cat-mouseover"></div>
<img src="/images/product1.png" alt="Sample Product Name">
</a>
<h2 class="product-name">Sample Product Name</h2>
<div class="price-box">
<p class="old-price">
<span class="price-label">For:</span>
<span class="price" id="old-price-426"> 199,-</span>
</p>
<p class="special-price">
<span class="price-label"></span>
<span class="price" id="product-price-426"> Now 139,- </span>
</p>
</div>
<div class="actions">
<button type="button" title="Buy Now" class="button btn-cart" onclick="setLocation('/checkout/cart/add/uenc/aHR0cDovL3d3dy52aXRhLm5vLw,,/product/426/')"><span><span>Buy</span></span>
</button>
</div>
</li>
<li class="item">
<a href="product1.php" title="Sample Product Name" class="product-image">
<span class="sale-item">Sale!</span>
<div class="cat-mouseover"></div>
<img src="/images/product1.png" alt="Sample Product Name">
</a>
<h2 class="product-name">Sample Product Name</h2>
<div class="price-box">
<p class="old-price">
<span class="price-label">For:</span>
<span class="price" id="old-price-426"> 199,- </span>
</p>
<p class="special-price">
<span class="price-label"></span>
<span class="price" id="product-price-426"> Now 139,- </span>
</p>
</div>
<div class="actions">
<button type="button" title="Buy Now" class="button btn-cart" onclick="setLocation('/checkout/cart/add/uenc/aHR0cDovL3d3dy52aXRhLm5vLw,,/product/426/')"><span><span>Buy</span></span>
</button>
</div>
</li>
http://jsfiddle.net/585BC/
Please advise.
Put this at the top of your callback:
if ($(event.target).hasClass("btn-cart") || $(event.target).parents(".btn-cart").length !== 0) {
return;
}
Now if the "event.target" (= where the click occured) has the class "btn-cart" or is a child of this "btn-cart", then the execution of your callback returns.
See updated fiddle: http://jsfiddle.net/585BC/2/
Just exit the event handler if you click the button:
if(($(event.target).is('.button.btn-cart')) return;
// rest of your code goes here