This question already has answers here:
Find a string of text in an element and wrap some span tags round it
(6 answers)
Closed 6 years ago.
I am trying hide specific text element from content by jquery. Example below.
HTML:
<div id="name">
Trying hide specific Text elements from content.
</div>
I want this by jquery:
<div id="name">
Trying hide <p style="display: none;">specific<p> Text elements from content.
</div>
There any simple solution by jquery?
You can use .html() method.
Also, use regex so you could hide all of them.
Like this:
var hideElm = 'specific',
regex = new RegExp(hideElm, 'g');
$('#name').html(function(i, html){
return html.replace(regex, '<span style="display:none">' + hideElm + '</span>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="name">
Trying hide specific Text elements from content. Another specific
</div>
If you wanted to remove that word from text in div then you could try this:
$('div:contains("Specific:")').each(function(){
$(this).html($(this).html().split("Specific:").join(""));
});
This will remove "Specific" word from all divs. you can put element ID to remove from particular div.
Use replace() method
Check this snippet:
$(document).ready(function() {
$('button').click(function() {
$('#name').html(function(index, text) {
return text.replace('specific', '<p style="display:none;">specific</p>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="name">
Trying hide specific Text elements from content.
</div>
<br />
<button>Hide</button>
Try It Once
$('#name').click(function(){
$('#name p').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="name">
Trying hide <p >specific</p> Text elements from content.
</div>
Don't use <p> because it adds a new line.
Change your html:
<div id="name">
Trying hide <span class="specific">specific</span> Text elements from content.
</div>
And add in the code:
$('.specific').hide();
You can hide p element inside main div by the following.
$(#name > p).hide();
If you don't want it it's own paragraph, you can use a span. Assigning a class or id to that span would probably be best, but with what you have:
<div id="name">
Trying hide <p style="display: none;">specific<p> Text elements from content.
</div>
$(#name p).hide();
will work (find all paragraphs in the element with the name "name" and hide them)
This is jquery
<script>
$(document).ready(function(){
$('#name').find('.specific').hide();
});
</script>
This is HTML
<div id="name">
Trying hide <span class="specific">specific</span> Text elements from content.
</div>
Related
I have an ArrayList named conversations_client, I want to be able to get the value of conversation[6] for each div.
Each one the the media div represent a conversation.
Here is a part of my code :
<c:forEach var="conversation" items="${conversations_client}" >
<div class="media">
<div class="media-left">
<input class="checkbox" type="checkbox" name="selected-conv">
</div>
<div class="media-body">
<h4 class="media-heading">${conversation[0]}</h4>
<span class="hidden">${conversation[6]}</span>
......
I had first tried to use this code :
<script type="text/javascript">
$('.media').click(function(){
var text = $(this).text();
alert(text);
});
</script>
But it would print not only conversation[6] but others as well since they're all inside the div with class media.
Then I tried this :
<script type="text/javascript">
$('.media').click(function(){
var text = $('.hidden').text();
alert(text);
});
</script>
But it would print the same id for all divs, which is the id of the first one.
How can I do that? and would it be better to wrap those media divs with tags to be able to use a specific action for each one of them? because I am displaying all conversations, then once the user will click on one them I'll have to recover its id to be able to display the messages of that specific conversation and it isn't advisable to write Java code inside of jsp.
Thank you :)
Use find from current element.
$('.media').click(function()
{
var text = $(this).find('#hidden').text();
alert(text);
});
UPDATE:
You are using loop to repeat the markup. It's not good to use ID hidden multiple times as per W3C standards. ID should be unique and should be used once in the page.
Use class instead of id for multiple usages. In this case class="hidden"
Better change <span id="hidden">${conversation[6]}</span> to <span class="hidden">${conversation[6]}</span>
Also change JS to find .hidden
$('.media').click(function()
{
var text = $(this).find('.hidden').text();
alert(text);
});
I'm trying to take the links from div links and add them to div links2 keeping the links in div links the way they are and the links in div links2 with a <br /> after each link
What are you talking about!?!
ok lets take a look:
HTML:
<div id="links">
one
two
three
</div>
<div id="results"></div>
<div id="links2"></div>
JS:
var elements = $('#links a');
$('#results')
.text('there are ' + elements.length + ' links');
$('#links2').append(elements)
ok so ignore the results div, this is just showing how many links there are total.
right now i have append, which is completely removing the links from div links. how can I make it so it just adds the links to links2 with a br between each link.
So the final output would print something like this:
<div id="links">
one
two
three
</div>
<div id="results">there are 3 links</div>
<div id="links2">
one<br />
two<br />
three<br />
</div>
updated fiddle:(need to add br still)
http://jsfiddle.net/upLg4/44/
You have to .clone() it before appending to other element,
$('#links2').append(elements.clone())
DEMO
The object elements is referring a group of anchor tags inside div#link, so normally append will shift the elements from one place to other when it encounters an object referring other elements/a selector. That is why we have to clone it manually.
Use after() method to add <br> after each link like following.
var elements = $('#links a');
$('#results').text('there are ' + elements.length + ' links');
$('#links2').append(elements.clone());
$('#links2 a').after('<br />'); // use this line to add <br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links">
one
two
three
</div>
<div id="results"></div>
<div id="links2"></div>
I want to remove/hide the element inside the parent in specific range. Is that possible in jquery?
<body class="page page-id-5269 page-parent page-template-default logged-in kleo-navbar-fixed navbar-resize js" itemtype="http://schema.org/WebPage" itemscope="">
<p>Your account is not setup as a vendor.</p>
<form action="" method="POST">
//....
</form>
<br class="clear" style="display: none;">
//other element here that should be display ...
</body>
on the code above i want to remove element inside the body tags but until in <br class="clear"> only. The element that i want to remove is dynamically generated it can be div, p, span, etc...
Currently i have code like this but it will remove only the specific element (not dynamicaly):
$('body.page div').first().hide();
Please help. Thank you!
That is you want to hide all the previous siblings of br.clear element which is a child of body.page so
$('body.page > br.clear:first').prevAll().hide();
This might be solution:
$('body.page').find('*').each(function(){ //iterating all children
$(this).hide();// removing elment
if($(this).is( "br.clear" ))//checking element is br having class clear
return false;// breaking loop
});
See DEMO: Instead of using body i have used div.container.
I am trying to select those input fields on page to validate which are visible on layout. I am able to find out this through one way but with another way its not actually working. What I am getting is my selector is working for direct child but not for grand children.
I want to select only those elements ids which are actually visible on layout to validate them as they should not be blank.
Jsfiddle Demo
HTML
<div id="createdDiv1">
<div id="row11">
<div class="hide">
<input type="text" class="blk" id="inp_11"/>
</div>
</div>
<div id="row12">
<div>
<input type="text" class="blk" id="inp_12" />
</div>
</div>
</div>
<div id="createdDiv2">
<div id="row21" class="hide">
<div>
<input type="text" class="blk" id="inp_21" />
</div>
</div>
<div id="row22" class="">
<div>
<input type="text" class="blk" id="inp_22" />
</div>
</div>
</div>
<button onclick="subCheck('#createdDiv1 :visible')">check 1st</button>
<button onclick="subCheck('#createdDiv2 :visible')">check 2nd</button>
JavaScript
function subCheck(inBlock) {
inBlock=(inBlock==undefined)?'':inBlock;
var ids=[];
$(inBlock+' .blk').each(function(){
ids.push($(this).attr('id'));
});
console.log(ids);
}
CSS
.hide{
display:none;
}
Note: I don't want to change my subCheck() function since its generalized for all valiations, what I need to know how can I make it work with :visible selector or something similar to it to work with multi-levels checks for visible elements.
Sorry If I am making it ambiguous for you. I am not sure what exactly to explain in words.
use :not to exclude the class .hide:
<button onclick="subCheck('#createdDiv1 .inputDiv:not(\'.hide\')')">
check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:not(\'.hide\')')">
check 2nd
</button>
Fiddle: http://jsfiddle.net/Z4PSV/1/
Although I wouldn't suggest using onclick at all though, instead:
<button class="subcheck" data-id="createdDiv1">check 1st</button>
<button class="subcheck" data-id="createdDiv2">check 2nd</button>
<script>
$(document).on('click', '.subcheck' function() {
//Creates string as: '#createdDiv1 .inputDiv:not('hide')
var ft = "#" + $(this).data('id') + " .inputDiv:not('.hide')";
subCheck( ft );
});
</script>
Fiddle: http://jsfiddle.net/kY8Wh/
Lastly, if you were wishing to implement your :visible then:
<button onclick="subCheck('#createdDiv1 .inputDiv:visible')">
check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:visible')">
check 2nd
</button>
Fiddle: http://jsfiddle.net/Zgm78/
Would be sufficient too.
The issue is that you scan all the inner .blk elements of a visibile top element using each, in this case the element itself is visible, but hidden from the middle parent.
I know you won't change your subCheck function, bu you can simply solve the issue by checking there the visibility of the child element .blk.
Visibile selector take care of the effective visibility of the element (direct or nested):
Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero.
Elements with visibility: hidden or opacity: 0 are considered visible,
since they still consume space in the layout.
Elements that are not in a document are considered to be hidden;
jQuery does not have a way to know if they will be visible when
appended to a document since it depends on the applicable styles.
I think that this change will not break anything in your code.
Code:
function subCheck(inBlock) {
inBlock=(inBlock==undefined)?'':inBlock;
var ids=[];
$(inBlock+' .blk:visible').each(function(){
ids.push($(this).attr('id'));
});
//console.log(ids);
alert(ids);
}
Demo: http://jsfiddle.net/IrvinDominin/her4Y/
I am making a HTML page, with JavaScript. In the HTML is the first content of a div, but when the user clicks a button, the text changes.
The text in the div is actual content, and needs to be findable by Google. The text is now stored in a simple variable in the JavaScript file.
Questions:
- Is that text indexed?
- Are there any better ways to store the text?
You can keep the text in a div and then change the visibility to hidden
<div id="content" style="visibility: hidden;">
Div content
</div>
Then in javascript,
document.getElementById("content").style.visibility="visible";
should make the document visible. Since the text will be there in the source for the page, it will be indexed by google, but will be displayed only when you run that line of javascript.
Storing the text in js variables is generally not a good idea.
You can put this text in a hidden div instead, like this:
<div id="target">
super-text
...
</div>
<div id="second">
super-mega-text
...
</div>
<button onclick="replace_text();">
<script type="text/javascript">
function replace_text() {
var target = document.getElementById('target');
var second = document.getElementById('second');
target.innerHTML = second.innerHTML;
}
</script>
In that case your second text will be indexed by Google.
Of course you better use any js framework like jQuery or Mootools.
Mootools example:
<div id="target">
super-text
...
</div>
<div id="second">
super-mega-text
...
</div>
<button id="button">
<script type="text/javascript">
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('target').set('html', $('second').get('html'));
});
});
</script>
Javascript is not searched, see googles answer:
http://www.google.com/support/customsearch/bin/answer.py?answer=72366
I found a good article about hide/display content only with CSS. It's working without Javascript: http://www.devinrolsen.com/css-hide-and-display-content/