I have a ul that contain 2 li each of them have a text and a span that contain text like this
<ul>
<li>Erbil<span>text-1</span></li>
<li>Sulymany<span>text-2</span></li>
</ul>
i want to remove Erbil and Sulymany from the code with jquery.... I'm used this in jQuery
$('li').each(function () {
$('li').html($('span'));
});
but the result like this..
text-1text-2text-1text-2
text-1text-2text-1text-2
how to output only a span without repeating?
Try to use .html() and its receiver function to accomplish your task,
$('ul li').html(function(){
return $(this).find('span');
});
DEMO
At its simplest, assuming it's always the first child you want to remove:
$('li').each(function(){
this.removeChild(this.firstChild);
});
JS Fiddle demo.
Is this what you want? Very crude way though.
$('li').each(function () {
var text = $(this).find('span').html();
$(this).html('<span>'+text+'</span>');
});
Related
I would like to add a class to an adjacent element using the attribute of an anchor tag with javascript:
HTML:
<ul>
<li><span></span>Black</li>
<li><span></span>Red</li>
<li><span></span>Blue</li>
<li><span></span>Green</li>
<li><span></span>Yellow</li>
</ul>
JS:
$(document).ready(function(){
var swatchColor = $(".swatchButton").data('color');
$(".swatchButton").find('span').addClass(swatchColor);
});
I'm eventually looking for:
<li><span class="blk"></span>Black</li>
Do I need to create some kind of array with forEach()?
Thanks!
http://jsfiddle.net/cL1rpk9L/
use each() in jquery
$(document).ready(function(){
$(".swatchButton").each(function() {
var swatchColor = $(this).data('color');
$(this).find('span').addClass(swatchColor);
});
});
Demo: https://jsfiddle.net/tamilcselvan/cL1rpk9L/3/
Your code var swatchColor = $(".swatchButton").data('color'); will return the data-color of the first element with class swatchButton and $(".swatchButton").find('span').addClass(swatchColor); will assign that value to each span element which is a descendant of an element with class swatchButton.
You need to set the color for each span individually
$('.swatchButton span').addClass(function(){
return this.parentNode.dataset.color;
});
Demo: Fiddle
or
$('.swatchButton span').addClass(function(){
return $(this).parent().data('color');
});
Demo: Fiddle
I have a list of divs:
<div class="person"></div>
<div class="person"></div>
<div class="person"></div>
I want to hide all of the divs except the 107th and the 2nd.
I tried using jquery filter, but couldn't quite wrap my head around a solution.
You can filter (zero based)
var arr = [3, 107];
$('.person').filter(function(i) {
return $.inArray((i+1), arr) == -1;
}).hide();
FIDDLE
jsFiddle Demo
Gather a list of the people, and then use .eq() to select them (it is 0 based). Here is a simple example:
var people = $('.person');
var exclude = people.eq(3).add(people.eq(5));
people.not(exclude).hide();
Use CSS selector or use Jquery's selector like this:
.person:nth-child(107) { display:none; }
$(".person").eq(106).hide();
You're looking for the "nth-child" selector.
The following will skip two and every other div will be selected by the CSS rules within.
div.person:nth-child(1n+2)
In your case:
div.person:nth-child(107), div.person:nth-child(2)
{
/* Rules here */
}
Here is a pure JS solution, if that floats your boat, though straight-up CSS would also be an option:
[].forEach.call( document.querySelectorAll('div.person'), function(el) {
el.style.display = 'none';
});
[].forEach.call(document.querySelectorAll('div.person:nth-child(2), div.person:nth-child(107)', function(el) {
el.style.display = 'block';
})
DEMO FIDDLE
You can just use plain old CSS:
.person {
display: none;
}
.person:nth-child(2),
.person:nth-child(107) {
display: block;
}
I have a set of li elements forming a menu. When the user clicks a particular li element I want to change the source of an iframe element to the URL that corresponds to the clicked item.
I've tried the function below but it didn't work. Can somebody please advise how to do this?
http://jsfiddle.net/ZnMTK/8/
$(document).ready(function(){
var source1="http://www.hurriyet.com.tr";
var source2="http://www.milliyet.com.tr";
var source3="http://www.vatan.com.tr";
var source4="http://www.ensonhaber.com";
$("#menubar ul li:nth-child(i)").click(function(){
$(this).attr('src', source(i) );
});
});
You can use an array and then use the clicked li elements index to fetch the target source from array.
$(document).ready(function(){
var sources =["http://www.hurriyet.com.tr","http://www.milliyet.com.tr","http://www.vatan.com.tr","http://www.ensonhaber.com"],
$("#menubar li").click(function(){
$('#iframe1').attr('src', sources[$(this).index()])
});
});
Demo: Fiddle
This type of functionality is what arrays are for:
$(document).ready(function(){
var sources =["http://www.hurriyet.com.tr","http://www.milliyet.com.tr","http://www.vatan.com.tr","http://www.ensonhaber.com"],
i = 0;
$("#menubar li").click(function(){
$("#iframe1").attr('src', sources[$(this).index()] );
});
});
However, specifying all of your URLs in your JavaScript and relying on the indices matching up with the order of the menu li elements is kind of fragile. I would recommend linking the values more closely, perhaps something like this:
<ul id="menubar">
<li data-src="http://www.hurriyet.com.tr">Hurriyet</li>
<li data-src="http://www.milliyet.com.tr">Milliyet</li>
<li data-src="http://www.vatan.com.tr">Vatan</li>
<li data-src="http://www.ensonhaber.com">Ensonhaber</li>
</ul>
And then with JS:
$(document).ready(function () {
$("#menubar li").click(function () {
$("#iframe1").attr('src', $(this).attr("data-src"));
});
});
This is the pen I'm working on.
If you will see the pen,the first container have a child div that is not showing in the result.The Jquery as follows,
$('.content-canvas').find('div').hide();
$('.content-canvas div:first-child').show();
$('.tab-button span:first-child').addClass('active');
$('.tab-button').find('span').click(function(){
$('.tab-button').find('span').removeClass('active');
var currentclass=$(this).attr('class');
$(this).addClass('active');
$('.content-canvas').find('div').each(function(){
if($(this).attr('class')==currentclass)
{
$('.content-canvas').find('div').hide();
$(this).slideDown(200);
$(this).children().show(200);
}
else
{
$(this).hide();
}
});
});
First line:
$('.content-canvas').find('div').hide();
Change to
$('.content-canvas > div').hide();
Do the same with all the same selectors you used. You only need to hide the direct descendant, not all divs.
Also, I recommend caching this selecotr into a variable:
var elements = $('.content-canvas > div').hide();
...
...
element.each(function() {
...
and so on, so that you don't have to jump into the DOM everytime.
It's because at the beginning of your js code, you hide every div.
Show it by using something like:
$('.content-canvas .content1 div').show();
Or put your 'as' inside a span instead of a div such as:
<span>as</span>
Please check my fiddle
Given the htmls:
<div id="t">
<a class="xx">xx</a>
<a class="yy">yy</a>
<a class="zz">zz</a>
</div>
Now how about if I want to get the links whose class is xx or zz, that's to say I want to get this:
<a class="xx">xx</a>
<a class="zz">zz</a>
I tried this:
$("#t a").each(function(){
if($(this).is(".xx,.yy"){
//here how to get the out the HTML of the current a element?
}
});
Any alternatives?
I noted that there are two answers, but it seems that they misunderstand me.
$("#t a").each(function(){
if($(this).is(".xx,.yy"){
//here I want to get the full HTML of the `a` element
// That's to say, I want to get `<a class="xx">xx</a>`
// I can not use $(this).html() or $(this).text() which will only return the `xx`.
}
});
The other answers are incorrect. Here is exactly how you'd get it.
$('a.xx,a.yy').each(function(index, currentLink){
var z = currentLink.outerHTML; //z will be <
});
Another solution, using jQuery to get the anchor HTML:
$('a.xx,a.yy').each(function(index, currentLink){
alert($(currentLink.outerHTML).wrap('<p/>').parent().html());
});
Here's the jsfiddle http://jsfiddle.net/wabjw/
$("#t a.xx,#t a.yy").each(function(){
$('<div>').append($(this).clone()).html();
});
var html = '';
$('#t a.xx, #t a.zz').each(function(){
html += $(this).wrap('<p/>').parent().html();
$(this).unwrap();
});
JS Fiddle: http://jsfiddle.net/rwGsR/9/
Is this correct?
JS:
$("#t a").each(function(){
if($(this).is(".xx,.yy")){
console.log(this.outerHTML);
}
});
It return: "<a class=\"xx\">xx</a>" & "<a class=\"yy\">yy</a>" in console.
You can try .find()
$("#t").find('.xx,.yy')