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>
Related
I have a couple of <div> like this:
<div>
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
</div>
How can I create dynamically another div to cover div#1 and div#2 in JS or jQuery ?
<div id='event'>EVENT</div>
Thanks.
You can use wrapAll function provided by jQuery like
$("#1, #2").wrapAll( "<div class='new' id='event'>EVENT</div>");
.new{
color : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<div id='1'>1..</div>
<div id='2'>2..</div>
<div id='3'>3..</div>
</div>
The .wrapAll() function can take any string or object that could be passed to the $() function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around all of the elements in the set of matched elements, as a single group.
Here for more details
I found this on Mozilla's doc page, describing the outerHTML attribute.
https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
After you get the parts of the code you want to wrap, reassign it with a <div> on the front side of 1 and a </div> on the back side of 2.
d1 = document.getElementById('1');
d2 = document.getElementById('2');
d1.outerHTML = '<div>' + d1.outerHTML;
d2.outerHTML = d2.outerHTML + '</div>';
So in an html structure like this:
<a class="member-main">
<!-- other divs and html elements -->
</a>
<div class="hidden-group-item">
<!-- other divs and html elements -->
</div>
I want to bind a click event to an html element with class .member-main so to show a hidden element .hidden-group-item.
There are plenty of those elements repeated in the page in pairs so I'd also like to show only that .hidden-group-item immediately below its respective .member-main
I'm aiming to do so with a function like below, helped by this previous question:
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item')[0].toggleClass('hide')
});
I can get the element associated on click through this keyword (if I console log it), but I can't seem to grab that node that'd let me traverse down to the hidden-group-item.
How does this work in this case and what would be the most efficient way to achieve this?
...[0] returns a nodeElement not a jQuery object that has the function toggleClass. Try this:
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item') // next is already returning one item so no need to try to access the first
.toggleClass('hide')
});
This works as expected
The docs about the .next() method says the following:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
Because you have the onClick handler and you're selecting the currently clicked element as $(this) then the matched set of elements is only the one you clicked, thus the next() call gets the .hidden-group-item just beneath it.
Sample
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item').toggleClass('hide')
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
JSFiddle
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>
So I am trying to do some inner HTML pop up window work, by using Jquery.contents() on a hidden div to place the content in the pop window on click.
For some reason, if any of the divs have an iframe in them, all the divs after them in the html will not be able to be appended. Is this some sort of bug? Here is an example:
<div class="hide">
<div id="apps">
<iframe src="http://ryansaxe.info/javascriptpaint" />
</div>
<div id="contact">
<ol>
<li>Phone: (111)-111-111</li>
<li>Email: email#gmail.com</li>
</ol>
</div>
<div id="resume">
<p>resume</p>
</div>
</div>
In the case above, only the #apps content reads, because it has an iframe, and all contents after that then don't read. If the div with the #apps id was last, every single one would have readable contents through Jquery.contents()
Jsfiddle
note:
Here is my jquery
$('.open').click(function(){
var name = $(this).attr("name");
var selector = $(name);
var cont = selector.contents();
$('#pop').append(cont.clone());
});
$('.close').click(function(){
$('#pop').empty();
});
Like scripts, you cannot use the /> syntax with iframes. Explicitly write out the </iframe>:
<iframe src="http://ryansaxe.info/javascriptpaint"></iframe>
<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.
You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>
You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});