I want to hide first word(ILS) from the span by using css..I have a div which have no class and inside that div there is a span...I just want to hide this word(ILS) from the span...Please guide me where i am wrong
Text displayed like this on the site:
Here is my div:
<div class="purhstdtls-delvry-timesec">
<h5>Test Sample</h5>
<div class="purchase-price"></div>
<div>Some Text Here</div>
<div>
<span>ILS 0.10 / מכירה</span>
</div>
</div>
Css :
.purhstdtls-delvry-timesec>div:nth-child(4)>span:first-word{
display:none;
}
Preferably you add an id to the span or already send the right thing in the backend but:
You can just replace the content.
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>$(document).ready(
function(){
$('span').text($('span').text().replace('ILS',''));
});
</script>
</head>
<div class="purhstdtls-delvry-timesec">
<h5>Test Sample</h5>
<div class="purchase-price"></div>
<div>Some Text Here</div>
<div>
<span>ILS 0.10 / מכירה</span>
</div>
</div>
It's a dirty solution but it'll work.
You can add wrapper around your required text to be hidden in your case ILS, Try following Code
$(document).ready(function(){
$("span:contains(ILS)").each(function(k,v){
var d = $(v).html();
d = d.replace("ILS", "<div style='display:none'>ILS</div>");
$(v).html(d);
});
});
Related
I want to append an element of H2 <h2>H2</h2> to the html as shown below
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="a">
<h1>H1</h1>
<!--I want to add H2 here-->
<h3>H3</h3>
</div>
<div id="b">
</div>
</body>
</html>
I query the div like this var mydiv = $("#a")[0]; and then I want to append <h2>H2</h2> inside myDiv, but after <h1>H1</h1> OR before <h3>H3</h3>. I have played around a bit with after(), insertAfter(), before(), insertBefore() with no luck, because i want to target and use the object 'myDiv' and not the whole html page.
EDIT: Some things I have tried
I have tried the following:
var myDiv = $("#a")[0]
$(myDiv).append("<h2>H2</h2>")
This adds the element to the end of the div
Also tried this:
$("h1").after("<h2>H2</h2>")
This adds <h2>H2</h2> after every <h1>H1</h1> which is not what I need to do, I need to add <h2>H2</h2> only inside the selected div which in this case is myDiv
Use jQuery#after and jQuery#find
var myDiv = $("#a")[0];
$(myDiv).find('h1').after("<h2>H2</h2>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
<h1>H1</h1>
<!--I want to add H2 here-->
<h3>H3</h3>
</div>
<div id="b"></div>
or
$("#a").find("h1").after("<h2>H2</h2>");
or
$("#a h1").after("<h2>H2</h2>");
Your code is correct, only need change the selector adding h1 in the myDiv selector.
Example:
var myDiv = $("#a h1")[0]
$(myDiv).after("<h2>H2</h2>")
I would like to check if the text exist in the div element, so that if text matches the text in div it will alert "hello". May I know how am I able to achieve this result? Thank you.
<script type="text/javascript">
jQuery(document).ready(function(){
var text = "div[style*=\"width: 550px;\"]";
if (#content.indexOf(text) > -1){
alert("Hello");
}
});
</script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
Here you go with a solution https://jsfiddle.net/9kLnvyqm/
if($('#content').text().length > 0) { // Checking the text inside a div
// Condition to check the text match
if($('#content').text().indexOf('Amy')){
console.log('Hello');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
If you want only the text content from a container then use text(), if you are looking for html content then use html().
Hope this will help you.
It is possible to get the value of inline style of an element.
var wid = $("#content > div")[0].style.width;
if(wid === "550px"){
//correct width detected. you can use alert instead of console.log
console.log("hello");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
You have multiple elements inside #content. you may want to use the return value of
$('#content').children().length;
and loop the program to get inline width of all elements. Ping if you need some help with the loop
I have several divs with the same class names and varying IDs. The ID is not set for the text I need to target
I need to target the Telephone Call text. If the div contains that text, how do I hide the containing div
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
</div>
I have tried the following to no avail
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").hide ();
});
</script>
If your code is hiding the span, but not the parent div, you can target the div to be hidden using mostly the same code you already wrote.
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").parent().hide();
});
</script>
Try selecting it's child instead of the element itself :
$(document).ready(function() {
$(".rn_FieldDisplay *:contains('Telephone Call')").hide ();
});
Try with find() function
$(document).ready(function() {
$(".rn_FieldDisplay").find(":contains('Telephone Call')").hide ();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
<p class="rn_DataLabel">Telephone Call </p>
</div>
Well you can try this:
if ($(".rn_FieldDisplay > span:contains('Telephone Call')").length > 0) {
$(".rn_FieldDisplay > span").hide();
}
How can i split some text in div using html comment.
Lats say i haw:
<div id="id1">Some first text <!--more--> here.</div>
<a id=id1>Show/Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a id=id1>Show/Hide</a>
I wont a jquery or javascript to show or hide text after<!--more-->.
Thanks
You can try something like this:
Given markup:
<div id="id1">Some first text <!--more--> here.</div>
<a>Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a>Hide</a>
Add the following javascript:
//1. On page load, wrap text to be hidden in <span>
$(function() {
$("div").each(function() {
var html = $(this).html();
$(this).html(html.replace('<!--more-->', '<span class="hiddenText">', html) + '</span>');
});
// 2. Toggle visibility of span tags when clicking link
$('a').click(function() {
if ($(this).html() == 'Hide') {
$(this).prev('div').children('.hiddenText').hide();
$(this).html('Show');
} else {
$(this).prev('div').children('.hiddenText').show();
$(this).html('Hide');
}
});
});
Check my jsFiddle for a working example.
UPDATE: Updated solution to not rely on separate CSS class to hide/show text.
I have a div (blog post) containing multiple paragraphs.
Some of these contain text, other text + images and other only images.
I would like to target only the paragraphs containing only images and set text-align:center
Is this possible using only css or is js required?
Any suggestions?
Thanks
The following adds a special CSS class to all p tags that only contain img tags and whitespace:
$('.blog-post p').each(function(i){ // For each paragraph
if ( ($(this).find('img').length) && // If there's an image
(!$.trim($(this).text()).length)) // and there's no text
{
$(this).addClass('imgOnly'); // Add a special CSS class
}
});
The trim() function is used with text() to determine if the text only contains whitespace.
Sample content:
<div class="blog-post">
<p>Text</p>
<p><span>Text</span></p>
<p><img/></p> <!-- CSS class will be added -->
<p>Text <img/></p>
<p><span>Text</span><img/></p>
<p><img/> Text <img/></p>
<p><img/><img/></p> <!-- CSS class will be added -->
<p><img/> <img/></p> <!-- CSS class will be added -->
</div>
This example will help you: demo on jsFiddle
jQuery code:
$(function() {
var divs = $('.blog-post > div');
$.each(divs, function(i, div) {
/* cache variable */
var $div = $(div);
if ( !($div.find('p')[0]) ) { /* if there are no one p tag inside div */
$div.addClass('only-images');
}
});
});
CSS:
.blog-post > .only-images {
background-color: red; /* color is demo only */
}
So my example will add class only to third div containing only images in this example HTML markup:
<div class="blog-post">
<div>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
</div>
<div>
<p>some text</p>
<img src="//placekitten.com/g/100/100" alt="" />
</div>
<div> <!-- only this div would be applied class `only-images` customizable by css -->
<img src="//placekitten.com/g/100/100" alt="" />
<img src="//placekitten.com/g/100/100" alt="" />
</div>
</div>
To do this you can use javascript and write a function for it, you'll be best of using the javascript library Jquery. When you have a function for it you can later add new paragraphs and images without the need to write more code.
I would have written an example but I don't have much time. I hope I helped you a little
Css is not enough. You may use Css rules based on parents, but not based on children. For example you may target all images that appear inside paragraphs. The properties will apply to the images, and not to the paragraph. Example:
p img
{
/* properties */
}
Options remain Javascript or server-side, for example you could assign a specific class name to the paragraph based on the content (.imageOnly or .mixedContent).
I had to do this without jQuery and I came up with the following:
document.querySelectorAll('p').forEach(function(p) {
// if there's no image, stop
if (p.querySelector('img') === null) {
return;
}
// if there's text, stop
if (p.innerText.trim() !== "") {
return;
}
// otherwise, mark the paragraph
p.classList.add('img-only');
});
Only tested on modern browsers.