I have the following structure below. Using jQuery I need to take each link and display the href below it. I can use some child selectors to write code for each but I simply want to write something that does it for all div's with the 'col' class, and will allow for future additions...
<div class="col">
Google
</div>
<div class="col">
Yahoo!
</div>
<div class="col">
Facebook
</div>
<div class="col">
Twitter
</div>
The above should turn into...
<div class="col">
Google
<span>http://google.com</span>
</div>
<div class="col">
Yahoo!
<span>http://yahoo.com</span>
</div>
<div class="col">
Facebook
<span>http://facebook.com</span>
</div>
<div class="col">
Twitter
<span>http://twitter.com</span>
</div>
Any help is appreciated!
This smacks of you not having tried to write the code at all. You should really be able to do this on your own.
$('.col a').each(function() {
var $this = $(this);
$("<span>"+$this.attr('href')+"</span>").insertAfter($this);
});
$('div.col').each(function(){
alert($(this).find("a").attr("href"));
//figure out the rest yourself
});
$('.col > a').after(function() {
return $('<span>', {text:this.href});
});
this should do it. you can use each. read more about selectors.
$(document).ready(function(){
$("div.col").each(function(){
var hreftext = $(this).find("a").attr("href");
$(this).append("<span>" + hreftext + "</span>");
});
});
Something like this would work:
$('div.col').each(function() {
var $a = $(this).find('a:first'),
href = $a.attr('href');
$('<span>').text(href).insertAfter($a);
});
$(".col").each(function(){
var v= $(this).find("a");
$("<span/>",{text:v.attr('href')}).insertAfter(v);
});
DEMO
This can be done with a basic jQuery 'append()'
JsFiddle Example
$('div.col').each(function(){
var href = $(this).children('a:first').attr('href');
$(this).append('<span>' + href + '</span>');
});
yes I agree with each solution. But it would be better if you cache your selector.Otherwise each time jQuery has to dive into DOM. If its a big list may affect performance.
var col = $('.col a');
col.each(function(){
var val = $(this).text();
$(this).append("<span>"+val);
})
http://jsfiddle.net/cXkqc/2/
Update
There was a mistake from my part to interpreting the question. Updated code & link.
var col = $('.col a');
col.each(function(){
var val = $(this).attr('href');
$(this).after("<span>"+val);
})
http://jsfiddle.net/cXkqc/3/
thanks #am not i am
Related
Using $('div#top_container').html(), I get the following as an example:
<div class="top" id="top_container">
<div class="example">First</div>
<div class="example">Second</div>
</div>
giving...
<div class="example">First</div>
<div class="example">Second</div>
Here, using .replace(), I want to replace <div class="example"> with *%^% (random set of characters) and remove </div>:
var content = $('div#top_container').html();
var clean_1 = content.replace('<div class="example">','*%^%'); //add $*!#$
var clean_2 = clean_1.replace('</div>',' '); //remove </div>
giving...
console.log(clean_2); --> *%^%First*%^%Second
Now, the number of example div elements can vary and I need to first find out how to target them all. Also is there a cleaner way to target both <div class="example"> and </div> at the same time?
EDIT:
I am not looking to change the html itself, but rather have the edited version as a variable that I can do stuff with (such as send it to php via ajax).
How would I do this?
Use replaceWith() method with a callback and generate prefered text string by getting text content using text() method.
$('div.example').replaceWith(function(v) {
return '%^%' + $(this).text();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="example">First</div>
<div class="example">Second</div>
</div>
UPDATE: If you don't want to update the original element then use clone() and do the remaining thinks on the cloned element.
var res = $('#parent')
// clone element
.clone()
// get element with `example` class
.find('.example')
// update content
.replaceWith(function(v) {
return '%^%' + $(this).text();
})
// back to previos selector and get html content
.end().html();
console.log(res)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div class="example">First</div>
<div class="example">Second</div>
</div>
Create one prototype like :
String.prototype.replaceAll = function (toReplace, replaceWith){
return this.split(toReplace).join(replaceWith);
}
and your jquery code be like :
$("div#top_container").each(function( i ) {debugger;
console.log(this.innerHTML.replaceAll('<div class="example">','*%^%').replaceAll('</div>',' ');)
});
You can use replaceWith function
$(function () {
$(".example").replaceWith(function(){
return "%^%"+$(this).text();
});
});
You can make a clone of container if you don't want to change original div.
var html="";
$(function () {
var newHtml = $("#top_container").clone();
$(newHtml).find(".example").replaceWith(function () {
html+= "%^%" + $(this).text();
});
});
console.log(html);
This question already has an answer here:
Jquery get Name value of hidden field
(1 answer)
Closed 6 years ago.
I have little of an issue writing my script.
$(function(){
$(".wolny").click(function() {
var godzina = this.id;
var minuta = this.name;
alert(godzina + ":" + minuta);
});
Alert should give me output looking like so hour:minute. Instead of that I am getting this: hour:undefined. I really dont know what to do :x
Here's HTML code (php generated)
<div class="col-sm-3 kafelek wolny" name="15" id="9"></div>
Thank's for any help.
A div element doesn't technically have a name attribute. If you want to store a piece of data, store it as a data-* attribute. Something like this:
<div class="col-sm-3 kafelek wolny" data-name="15" id="9"></div>
Then retrieve it as such:
var minuta = $(this).data('name');
Try using .attr() function instead like so:
var minuta = $(this).attr('name');
This works because name in your case is a attribute and not a property. This will work with any random attribute like foo that you may add.
A better way is to add a data attribute like data-name="something" and read it with $(this).data(name).
Working Example:
$(function(){
$(".wolny").click(function() {
var godzina = this.id;
var minuta = $(this).attr('name');
alert(godzina + ":" + minuta);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-3 kafelek wolny" name="15" id="9"> Click me! </div>
Try this instead:
$(function(){
$(".wolny").click(function() {
var godzina = $(this).attr('id');
var minuta = $(this).attr('name');
alert(godzina + ":" + minuta);
});
});
However, if possible, I would recommend using data attributes for your values. Here's an example:
<div class="col-sm-3 kafelek wolny" data-hour="9" data-minute="15"></div>
Then, in the JavaScript, you use "data-hour" and "data-minute" for the attributes instead of "id" and "name" like it is now.
I'm having a really hard time trying to edit the JS code/API (Google Feeds) to make it work in a responsive design.
Right now the results of the API is as followed :
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
...
I want it to be like that :
<div class="gfg-group">
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
</div>
<div class="gfg-group">
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
</div>
I tried this (but don't get any result) :
$(document).ready(function(){ $("#contentfeed").append("<div class='gfg-grouped'></div>");
$(".gfg-grouped").text($(".gfg-subtitle").text() + " " +$(".gfg-list").text()); });
Tried this as well (doesn't seem to work either) :
var groupDiv = document.createElement('div');
groupDiv.className = 'gfg-group';
groupDiv.appendChild(newTitle);
groupDiv.appendChild(newList);
See http://jsfiddle.net/pnwm67q8/2/ :
Thanks to the previous replies, I went on and solved it myself (took me way too long but that's how we all learn right? :) Leaving the solution here if that can help someone.
I added the following lines :
var newGroup = this.createDiv_('gfg-grouped');
and
if (!this.options.horizontal && this.options.stacked) {
var newGroup = this.createDiv_('gfg-grouped');
var newTitle = this.createDiv_('gfg-subtitle');
nodes.root.appendChild(newGroup);
newGroup.appendChild(newTitle);
this.setTitle_(this.results[0].feed, newTitle);
and
newGroup.appendChild(nodes.list);
See : http://jsfiddle.net/m5krqvbz/3/
There's a lot of logic going and I'm not familiar with the API on but you can group the entries like so:
// group the Title and List
var groupDiv = document.createElement('div');
groupDiv.className = 'gfg-grouped';
groupDiv.appendChild(newTitle);
groupDiv.appendChild(newList);
You would get something like the following:
$intendedContainer = $("");
$(".gfg-subtitle").each(function(){
var $list = $(this).next().detach();
var $subitle = $(this).detach();
var $groupItem = $("<div class='gfg-group'></div>");
$groupItem.append($list).append($subtitle);
$groupItem.insertBefore($subTitle);
$intendedContainer.append($groupItem);
});
I didn't work through your entire code as it's quite huge, but this is the kind of logic you will need to implement.
This is not ideal, but I am running out of options on trying to wrap some HTML around a heading that I have. It is possible at all to target a header text and wrap HTML around that text?
Starting text:
<div class="header-intro-text">
<h1>New Business Conference</h1>
</div>
Ending Text with added HTML
<div class="header-intro-text">
<h1>New Business Conference</h1>
</div>
Try:
$(".header-intro-text h1").wrapInner('');
You should be able to do the following with jQuery:
$('h1').html('' + $('h1').text() + '');
or for multiple headers
$('h1').each(function() {
$(this).html('' + $(this).text() + '');
});
var hit = $('.header-intro-text h1');
var hitText = hit.text();
hit.html($('').text(hitText));
Demo: http://jsfiddle.net/qwertynl/reV9V/
var word = 'Conference';
function highlight(word){
var $container = $('.header-intro-text');
$container.html(
$container.html().replace(word, ''+word+'')
);
}
My goal is to change text in span .name into element with link-
<div class="input-wrap">
<span class="name">favorite 1</span>
</div>
How can I use JS to add link to this element so as it looks like that:
<div class="input-wrap">
<span class="name">favourite 1</span>
</div>
.wrapInner() wraps element around passed value.
Try this:
$(".name").wrapInner("<a href='/specyficwebsite.html'></a>");
Fiddle here.
You could:
$('span.name').html(function () {
return $('<a>').attr('href', '/specyficwebsite.html').text($(this).text());
});
See demo jsFiddle here.
Generated HTML:
<span class="name">favourite 1</span>
You can do this way:
$(".name").html(function(){
$(this).wrap("<a href='/specyficwebsite.html'></a>")
})
Demo Fiddle
try something like this
$(function(){
var link = ''+$('.name').text()+'';
$('.name').html(link);
})
Try with .wrapInner() like
$(".name").wrapInner( '' );
See this FIDDLE You can also try like
var txt = $('.name').text();
$('.name').html('' + txt + '');
Or directly
$('.name').html('' + $('.name').text() + '');
Try this FIDDLE
Heres the FIDDLE
var $name = $(".name");
var txt = $name.text();
$name.html('' + txt + '');