Check if text exist in div using jquery - javascript

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

Related

Hide First Word of Span by using Css or Jquery

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);
});
});

JQuery selector returns undefined

This html code was generated of my php code, but I copied this out of the HTML code of the browser.
The console.log prints out undefined. I don't know why. It's probably a really dumb mistake, like always. Thank you for your help.
$('.show').click(function() {
var id = $(this).attr('id');
var div = $("div#" + id);
console.log(div.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Heading <a href='#' class='show' id='2962'>+</a></h3>
<div class='.slidetoggle' id='2962' style='display: none;'>
<p>Test!</p>
</div>
It's because the .show element is an a, not a div. The selector is wrong:
var div = $("a#" + id);
Update:
You are right, but I want to show the div, not the a
In this case you need to use DOM traversal to find the relevant element. Your current code doesn't work as you have duplicate id attributes. This is invalid as they must be unique. Try this:
$('.show').click(function() {
$(this).closest('h3').next('.slidetoggle').slideToggle();
});
.slidetoggle { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Heading +</h3>
<div class="slidetoggle">
<p>Test!</p>
</div>
<h3>Another Heading +</h3>
<div class="slidetoggle">
<p>Another Test!</p>
</div>
I don't have the reputation to comment yet so I will have to give it as an answer, but the element you want is an nchor but your jQuery selector is targeting a element.

jQuery - Hide DIV which has a span element with certain text inside

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();
}

Getting the text element of group_name

<div class="group_list_table_row" group_id="10">
<div class="group_name">Name of Course</div>
<div class="group_list_edit_row" style="left: 215px;">
Click me.
</div>
</div>
<script type="text/javascript">
/* This triggers when update button is clicked. */
$( ".update_group" ).click(function(event) {
var value = $(this).parent().parent().text();
alert(value);
event.preventDefault();
</script>
I was trying to get the text only of group_name class which is "Name of Course". However, the result of alert(value) also includes "Click me." and "Name of Course". Need help on this.
You can do this easier:
<script type="text/javascript">
/* This triggers when update button is clicked. */
$( ".update_group" ).click(function(event) {
var value = $('.group_name').text();
alert(value);
event.preventDefault();
});
</script>
Try this:
$(".update_group").click(function(event) {
var value = $(".group_name").text();
alert(value);
event.preventDefault();
});
as long as the previous answers provide a proper solution you might be interested why yours does not work, and this is because the ".group_name" element is not a parent of the parent of your element, as you might expected. It is apparently not a parent at all, containing only plaint text inside.
Therefore the $(this).parent().parent() call returns the ".group_list_table_row" element, that contains the two other divs and it's text is the concatenation of their contents.
A some indentation and things will be obvious:
<div class="group_list_table_row" group_id="10"> /*parent 2*/
<div class="group_name">Name of Course</div>
<div class="group_list_edit_row" style="left: 215px;"> /*parent 1*/
Click me.
</div>
</div>

JS: Hiding DIV based on another DIVs content

I am looking to hide a number of DIVs based upon the specific text of another DIV. My Javascript (below) isn't working.
The HTML:
<div id="LEGEND">abAB</div>
<div id="small-a"></div>
<div id="small-b"></div>
<div id="big-a"></div>
<div id="big-b"></div>
If the LEGEND DIV contains the text a, then I want it to show only DIV small-a.
If the LEGEND DIV contains the text bA, then I want it to show only DIV small-b and big-a.
The Javascript:
<script>
window.onload = function ShowHide{
if (document.getElementById('LEGEND').indexOf("a") > 0){
document.getElementById('small-a').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("b") > 0){
document.getElementById('small-b').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("A") > 0){
document.getElementById('big-a').style.display = 'block';}
if (document.getElementById('LEGEND').indexOf("a") > 0){
document.getElementById('big-b').style.display = 'block';}
</script>
You are forgetting a couple of things.
A function declaration should be like this
function functionName(args) {
}
You have to hide the divs using style.display = "none"
Example:
<div id="LEGEND">abB</div>
<div id="small-a" style="display: none;">This is small-a</div>
<div id="small-b" style="display: none;">This is small-b</div>
<div id="big-a" style="display: none;">This is big-a</div>
<div id="big-b" style="display: none;">This is big-b</div>
<script>
function showElement(id) {
document.getElementById(id).style.display = "block";
}
window.onload = function ShowHide() {
var legend = document.getElementById("LEGEND").innerHTML;
if(legend.indexOf("a") != -1) showElement("small-a");
if(legend.indexOf("b") != -1) showElement("small-b");
if(legend.indexOf("A") != -1) showElement("big-a");
if(legend.indexOf("B") != -1) showElement("big-b");
}
</script>
The problem is that your code changes the other div elements to block-level elements when div is already a block-level element. You need to set them not to display initially using CSS and then reveal them in the JavaScript.
Try this instead:
<div id="LEGEND">abAB</div>
<div id="small-a" style="display: none;"></div>
<div id="small-b" style="display: none;"></div>
<div id="big-a" style="display: none;"></div>
<div id="big-b" style="display: none;"></div>
<script type="text/javascript">
window.onload = function() {
if (document.getElementById('LEGEND').indexOf('a') > 0) {
document.getElementById('small-a').style.display = 'block';
...
// etc.
}
}
</script>
First, try making sure the window.onload is being called:
window.addEventListener('load', ShowHide, false);
function ShowHide()
{...
Second, you should be looking at the InnerHTML of the element:
if (document.getElementById('LEGEND').innerHTML.match("a") == "a"){...
Third, each if statement should also contain an else (replace divName with real div names):
else {
document.getElementById('divName').style.display = 'none'}
Hope that helps!
~md5sum~
EDIT:
Also, I'm not 100% sure on this, but I believe that the syntax:
window.onload = function ShowHide{
will completely fail. I think that the syntax should be:
window.onload = function(){
If me, I will do like this. you dont need to touch HTML part, everything is done in javascript.
you can extend it to CDEFGH...
and you don't need to set <div id="small-X" style="display: none;"> for each tags too. :-)
<body>
<script>
window.onload=function(){
x=document.getElementsByTagName("div");
//first hide everything with small- or big-
for(i in x)
if(/small-|big-/.test(x[i].id))
x[i].style.display="none";
//then turn on each tags based on LEGEND
x= document.getElementById("LEGEND").innerHTML;
for(i=0;i<x.length;i++)
document.getElementById((x[i]<='Z'?'big-':'small-')+x[i].toLowerCase()).style.display='block';
}
</script>
<div id="LEGEND">aAB</div>
<div id="small-a">a</div>
<div id="small-b">b</div>
<div id="big-a">A</div>
<div id="big-b">B</div>
</body>
You need to set the style.display property to none.

Categories