This is probably a dummy question. I am trying to export the contents of a unordered list into a text area and remove the list item on export. I have achieved it at some degree but it only brings in the first list item.
How can I export all the li's?
HTML :
<div class="wrapper">
<button id="exportBtn">Export</button>
<div class="container">
<ul class="structure">
<li>Something</li>
<li>Something else</li>
</ul>
</div>
<div class="text">
<textarea id="exportTxt" contenteditable style=""></textarea>
</div>
</div>
This is my script :
$(function() {
$( "#exportBtn" ).click(function() {
var htmlString = $('.structure li').html();
$('textarea#exportTxt').html(htmlString).parent().is( 'li' ).htmlString.unwrap();
$('textarea#exportTxt').addClass('slideIn');
});
});
View working demo
So you want it to read SomethingSomething else.
$(function() {
$( "#exportBtn" ).click(function() {
var html = ''; // start with empty
$('.structure li').each(function(){
html += $(this).html(); // append the html from each li
$(this).remove(); // remove the li
});
$('#exportTxt').val(html); // set it in the textarea
});
});
Here is a jsfiddle with a working demo: http://jsfiddle.net/Grimbode/PucV2/
Hope this is what you wanted.
js:
$( "#exportBtn" ).on('click', function() {
$('.structure li').each(function(){
var txt = $('#exportTxt').text();
$('#exportTxt').empty();
$('#exportTxt').text(txt + ' ' + $(this).text());
$(this).remove();
});
});
html:
<ul class="structure">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button id="exportBtn">Export</button>
<textarea id="exportTxt"></textarea>
Try this:
js
$("#exportBtn").click(function() {
var list="";
$(".structure").children().each(function(){
list +=$(this).html() + " ";
});
$('textarea#exportTxt').val(list);
});
fiddle
Related
tricky situation.
I need to copy the inner html of 3 elements, from a ul li a selector and then inject a new div with the class name as the copied inner html
I manage to inject the element somewhat but I'm not close in doing what I need.
https://jsfiddle.net/gt97vz51/1/
jQuery from the fiddle:
(function($) {
$('ul > li').each(function(){
var html = $(this).html();
$(this).html('<span class="">' + html + '</span>' + html);
});
})(jQuery);
This is the actual output I need:
<ul>
<li><span class="name1"></span>name1</li>
<li><span class="name2"></span>name2</li>
<li><span class="name3"></span>name3</li>
</ul>
I would prefer a JavaScript solution but if I can get a jQuery solution I'll still be super happy.
Here is the jQuery solution, depending on your desired output:
(function($) {
$('ul > li').each(function() {
var className = $(this).find('a').text();
$(this).find('a').prepend('<span class="' + className + '"></span>');
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>name1
</li>
<li>name2
</li>
<li>name3
</li>
</ul>
You can try with:
(function($) {
$('ul > li a').each(function(){
var html = $(this).html();
$(this).prepend($('<span>', {'class':html}));
});
})(jQuery);
I have the following on html
<html>
<head>
<script src="../3003_Testing/js/jquery/dist/jquery.js"></script>
<script src="../3003_Testing/js/search.js"></script>
<title>Search Box</title>
<link href="mycss.css" rel="stylesheet">
</head>
<body>
<section class="main">
<form class="search" >
<input id="searchAddress" type="text" name="q" placeholder="Search address" oninput="getAddress()" />
<ul class="results" id="addressList">
<li id="staticli">Static li element<br><span>This is a Static li element</span></li>
</ul>
</form>
</section>
</body>
</html>
I am trying to get write a function to handle the event when any of the list element get clicked. But it doesn't seems to be triggering at all when I click on the <li> element.
$('#addressList').on('click', 'li', function() {
alert("clicked");
alert( $(this).text() );
});
The <li> elements are created dynamically through this code:
listContents = $("<li id=\"" + i + "\">" + addresses[i].lable + "</li>");
jQuery('#addressList').append(listContents);
And I verified through my browser's console that they are being created correctly as such
outerHTML: "<li id="0">6 Cashew Crescent<br><span>6 Cashew Crescent. (S)679751</span></li>"
Let's ignore about the dynamic list first. The thing is even my static list element are not responding to the event handler upon click. Have been trying to figure out the problem for a couple of hours now..
I have created a jsfiddle for my static li element not working https://jsfiddle.net/tmu50t9z/
jsfiddle to my whole code > https://jsfiddle.net/8wwnx64x/
$('#addressList li').on('click', function() {
alert("clicked");
alert( $(this).text() );
});
Work code, try this
HTML
<ul class="results" id='addressList'> </ul>
<button id="aaa">Add LI</button>
JavaScript
var a=0;
$('#aaa').click(function() {
$('#addressList').append('<li id="'+a+'">6 Cashew Crescent<br><span>6 Cashew Crescent. (S)679751</span></li>');
a++
});
$( "#addressList" ).on( "click", "li", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
When I click on my link it temporary pops up with the id number of that link.
Question How could I make it so if I click on a link then id would add that id to the input value where id is input[id="language_id"]
Code-preview MY Codepen Example
JQUERY
$(document).ready(function() {
$(".language li a").click(function(event) {
// Test make sure getting id
alert(event.target.id);
});
});
HTML
<div class="container">
<ul class="dropdown-menu language" role="menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<br/>
<br/>
</ul>
<form action="" method="post" id="language-form">
<input type="text" name="language" id="language_id" placeholder="Displays ID" value="" />
</form>
</div>
You have elements with the same ID; which is invalid HTML. Change one of them or use classes.
Element.id
It must be unique in a document
For your question use this.id with val(),
$('#language_id').val(this.id) //or event.target.id
Updated Codepen
$(".language li a").click(function() {
$('#language_id').val(this.id)
});
You can change the id of textbox by setting the id attribute of textbox.
$(".language li a").click(function(event) {
document.getElementById('language_id').id = event.target.id;
});
You can do like this
$(document).ready(function() {
$(".language li a").click(function(event) {
// Test make sure getting id
//alert(event.target.id);
$("#language_id").val(event.target.id);
});
});
$(document).ready(function() {
$(".language li a").click(function(event) {
$("#language_id").val(event.target.id);
});
});
your elementid shoud be unique
$(".language li a").click(function(event) {
$("input[id=language_id]").val(event.target.id);
});
To add multiple ids to the control Please give a try to this:
$(document).ready(function() {
$(".language li a").click(function(event) {
var str = $('#language_id').val() + "," + this.id;
$('#language_id').val(str.replace(/^,?/,""));
});
});
I have got 2 rows of html.
One row contains plain html and another row contains ul li lists.
First case:
On page load I want to change the text color of row one depending on which li is active.
Second Case
On click any li from second row, I would like to change the color of first row html depending on what data I have clicked in second row.
My code
First row
<div class="horizontal-link">
<div class="test">
<h4 data-id="1">Text 1</h4> <!--So on page load I would like to change the color to red as related with row 2 ul li) -->
</div>
<div class="test">
<h4 data-id="2">Text 2</h4>
</div>
</div>
Second Row
<ul>
<li class="tab active" data-id="1">Text 1</li>
<li class="tab" data-id="2">Text 2</li>
</ul>
I have tried and created a jsfiddle as demo:
Any help is highly appreciated. Thanks in advance.
You can use .filter() or attribute-selectors to check the data-id like this
jQuery
$(function(){
//Adds class on load depending on which is active
$('.test h4[data-id="'+$('ul li.active').data('id')+'"]').addClass('active');
//Adds class on click
$('li.tab').on('click',function(){
$('.test h4').removeClass('active');
$that = $(this);
$('.test h4').filter(function(){
return $(this).data('id')==$that.data('id')
}).addClass('active');
//removes class on clickable li and adds to clicked
$(this).addClass('active').siblings().removeClass('active');
});
});
CSS
.test h4.active {
color:red;
}
You need to change the css so it checked the h4 if has the class active
DEMO
You can either change text color of div or h4 by adding active class.
For div with active class use below jQuery
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').closest('.test').addClass('active');
$("li.tab").click(function () {
$('.active').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').closest('.test').addClass('active');
});
});
DEMO
For h4, you need to change CSS like below
CSS :
.test h4.active {
color:red;
}
jQuery :
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').addClass('active');
$("li.tab").click(function () {
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').addClass('active');
});
});
DEMO
Look at the JS fiddle here. I hope this will help you.,
Updated jQuery:
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id='+id+']').addClass('active');
$("li.tab").click(function () {
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id='+id+']').addClass('active');
});
});
JS Fiddle:
http://jsfiddle.net/v1v1tqzs/34/
There is a change in your CSS :-
.test .active {
color:red;
}
you wrote it as .test.active . There should be a gap . That's why on page load the color:red was not getting implemented .
YOUR UPDATED FIDDLE:
$(document).ready(function () {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4').each(function () {
if ($(this).attr('data-id') == id) {
$(this).addClass('active');
return;
}
});
$("li.tab").click(function () {
var id = $(this).attr('data-id');
$('.horizontal-link h4').each(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
}
});
$('.horizontal-link h4').each(function () {
if ($(this).attr('data-id') == id) {
$(this).addClass('active');
return;
}
});
});
});
Try this , code can be optimized
HTML:
<div class="horizontal-link">
<div class="test">
<h4 class = "1" data-id="1">Text 1</h4>
</div>
<div class="test">
<h4 class = "2" data-id="2">Text 2</h4>
</div>
</div>
<ul>
<li class="tab active" data-id="1">Text 1</li>
<li class="tab" data-id="2">Text 2</li>
</ul>
CSS :
.test.active {
color:red;
}
.tab {
cursor:pointer;
}
ul li.tab {
list-style:none;
display:inline-block;
width:50px
}
.active {
color:red;
}
JS:
$(document).ready(function () {
var id = $('ul').find('.active').attr('data-id');
if ($('.horizontal-link h4').attr('data-id') == id) {
$('.'+id).addClass('active');
}
});
$(".tab").click(function () {
$(".tab").removeClass('active');
$(this).addClass('active');
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.'+id).addClass('active');
});
I have a problem with dom-manipulation. I would like to add class to .text element on click on .fonts-container li.
<div class="editor">
<h2 class="text">Heading</h2>
<div class="ui-resizable-handle"></div>
<div class="ui-resizable-handle"></div>
<div class="ui-resizable-handle"></div>
<img class="icon-layer-up2" >
<img class="icon-layer-down2">
<img class="icon-trash2">
<i class="icon-move"></i>
<i class="font2"></i>
<div class="fonts-container">
<ul>
<li data-fontname="Aclonica">Aclonica</li>
<li data-fontname="Acme">Acme</li>
<li data-fontname="Alegreya">Alegreya</li>
</ul>
</div>
</div>
here is my buggy JS:
$(document).on('click', '.fonts-container ul li', function(){
if ( $('.font2').hasClass("active")) {
var fontName = $(this).data("fontname");
$(this).prev().parent(".editor").find('.text').addClass("fontset");
}
});
use closest
$(document).on('click', '.fonts-container ul li', function(){
if ( $('.font2').hasClass("active")) {
var fontName = $(this).data("fontname");
$(this).closest(".editor").find('.text').addClass("fontset");
}
});
You can go up the tree until you reach .fonts-container by using .closest() and then find the sibling node using .siblings():
$(this).closest('.fonts-container').siblings('.text')
use parents
$(document).on('click', '.fonts-container ul li', function(){
if ( $('.font2').hasClass("active")) {alert('a');
var fontName = $(this).data("fontname");
$(this).parents(".editor").find('.text').addClass("fontset");
}
});
Use parents
$('li'.'.fonts-container').on('click', function(){
if ( $('.font2').hasClass("active")) {
var fontName = $(this).data("fontname");
$(this).parents(".editor").find('.text').addClass("fontset");
}
});