Show an individual part of a string as output [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is my JavaScript code. I want to get only the value inside li tags using JavaScript. How can I do it?
JavaScript
var s="<div><li>First LI</li><li>Second LI</li></div>";
I want to show First li and Second li as output. Thank you.

You can use .text() to get the text content of your li elements:
var text = $(s).find('li').text();
Fiddle Demo

With the help of jQuery it is rather easy:
var str = '<div><li>First LI</li><li>Second LI</li></div>',
first = $('li:eq(0)', str).text(), // "First LI"
second = $('li:eq(1)', str).text(); // "Second LI"
console.log(first, second);

You can use following javascript, get element by tag name and iterate over the values like below
var liArray = document.getElementsByTagName('li');
for(var i=0; i < liArray.length ;i++)
{
var liValue = liArray[i].innerHTML;
alert(liValue);
}

check here, this may help you
<div><li>First LI</li><li>Second LI</li></div>
$('.btn').click(function(){
alert($('div li').text());
});
http://jsfiddle.net/Sathisa/78ktD/

The following code will output: 'First LI Second LI', the contents of both lis separated by a whitespace.
If you need it as array, just omit the join at the end.
var lisContent = $.map(
$('li', "<div><li>First LI</li><li>Second LI</li></div>"),
function(element) {
return $(element).text();
}
).join(' ');
console.log(lisContent);
http://jsfiddle.net/6gG3k/

Related

How to call querySelector for different class? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Need to make a webpart which gets data from API in JSON format. I generate a table from JSON with projects number. Then I change each td to link with class="project_number".
Now each position has it's specific class. No I need each link to direct to project details ot url like: https://XXX.azurewebsites.net/api/protocollines?protocolNo=PR0002
I don't know what parameter should I place in querySelector to have addEventListener for each link.
document.querySelector("???").addEventListener('click', *function*);
function changeToLink(){
var tableCells = Array.from(document.getElementsByTagName('td'));
var i;
var proNo = "PR0";
for (i=0; i<tableCells.length; i++ && isContains == true) {
var proFromArray = tableCells[i].innerHTML;
var isContains = proFromArray.includes(proNo);
if(isContains == true){
var tdElement = document.getElementsByTagName('td')[i];
console.log('Profrom: ' + proFromArray);
tdElement.innerHTML = `<a class="${proFromArray}" href='https://XXX.azurewebsites.net/api/protocollines?protocolNo=${proFromArray}'>${proFromArray}</a>`
}
}
}
document.querySelector(`??`).addEventListener('click', *function*);
There's a few ways to do this.
Option 1
You could create the anchor elements using JS, and add the onclick event when you create each one, like:
// inside the if(isContains == true){
var a = document.createElement('a');
a.className = proFromArray;
a.href = `https://XXX.azurewebsites.net/api/protocollines?protocolNo=${proFromArray}`;
a.textContent = proFromArray;
a.onclick = this.getJsonData;
I created a Fiddle to demonstrate how it works: https://jsfiddle.net/brettnolf/f3xd7ag1/
Option 2
Now, if you need to create it in the form of a string and later call querySelector on what you created, you could add the same class to each anchor tag:
tdElement.innerHTML = `<a class="${proFromArray} pro-elem" href='https://XXX.azurewebsites.net/api/protocollines?protocolNo=${proFromArray}'>${proFromArray}</a>`
Then add the event listener, like:
var pros = document.querySelectorAll('.pro-elem')
for (var i = 0; i < pros.length; i++) {
pros[i].addEventListener(this.getJsonData);
}
Option 3
If both of those solutions are out of the question, you could use a query selector wildcard and add the event listener similar to the above:
var pros = document.querySelectorAll('[class^=PR0]')
// or if you wanted to be really specific:
// document.querySelectorAll('td a[class^=PR0]')
for (var i = 0; i < pros.length; i++) {
pros[i].addEventListener(this.getJsonData);
}
You can see this last solution in action if you pull up Chrome dev tools here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll and enter document.querySelectorAll('[class^=title]') in the Console.
Note that the last two options will only work after the elements have been added to the DOM. In the first option, you add the listener when you create the element, so you do it on the fly.

jQuery check if the div contains such element before appending [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to check with jquery if the div contains such element before appending. I tried three versions but none of them helped.
Could you please check the commented lines of my code and help me to find the mistake.
var item = $('<div>');
var info = $(''+abc+'');
item.append(info);
var info = $(''+abc+'');
if (!item.contains(info)) { // first version
if (!item.has(info)) { // second version
if (!item.find(info).length() > 0) { // third version
item.append(info);
}
You can find all <a>'s in <div>'s:
var items = $('div a');
Now, if you need just <a>:
if (items == null) { $('div').append('<a></a>'); }
else, if you want find exact <a>, make a for loop:
var exactHref = "http://...";
if (items == null) {
var dummy = 0;
for (i = 0; i < items.length; i++) {
if (items[i].href == exactHref)
{
dummy +=1;
}
}
if(dummy > 0)
{
$('div').append('<a></a>');
}
}
It's not beautiful, but should work.
You can do it like following:
if (item.find('a').length == 0) {
// do your task here
}
You have to use .contains () for that.
var item=$("<div></div>");
var info = $("<a href=''></a>");
item.append (info);
if (item.contains (info))
{
//your code
item.append (info);
}

Translate simple Jquery to VanillaJS [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have this: $('#night > li').appendTo('#day');
The code moves all <li> elements of <ul id="night"> to the end of <ul id="day">.
Please, how can I translate this into VanillaJS?
I mean, how do I rewrite the code so I do not need Jquery?
Have this so far:
document.getElementById('night').li.appendTo.document.getElementById('day');
In pure JavaScript you could do it like this:
var night = document.getElementById("night");
var day = document.getElementById("day");
var lis = document.querySelectorAll("#night > li");
for (var i = 0, len = lis.length; i < len; i++) {
day.appendChild(lis[i]);
}
See fiddle for working example.
Could look like so
var target = document.getElementById( 'day' );
[].forEach.call(document.querySelectorAll( '#night > li' ), function( li ) {
day.appendChild( li );
});
You can try something like this:
var dayUl = document.getElementById("day");
var nightUl = document.getElementById("night");
var nightLis = nightUl.childNodes;
for (var i = 0, len = nightLis.length; i < len; i++)
{
dayUl.appendChild(nightLis[i]);
}
Also, you can go with #Marcus Ekwall's solution, but keep in mind that the solution isn't fully compatible with IE8 or below, and the first query for the night node is redundant (because below he searches for #night > li)

Element 2 get clicked element 1's id in Jquery [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
In javascript/jquery,
button1 clicked > get button1's id by
var button1id= $(this).attr("id");
button2 clicked > get button1id
I'd like to ask how button2 get button1's id?
Thank you!
$(".btn1").click(function() {
var catid = $(this).attr("id");
}
$(".btn2").click(function(){
var catid = $(".subscat").target.attr("id"); //HOW TO GET BTN1's ID??
}
Use:
$(".btn2").click(function(){
var catid = $(".btn1").attr("id");//gets .btn1 id
}
I think you're needing this:
var catid;
$(".btn1").click(function() {
catid = $(this).attr("id");
}
$(".btn2").click(function(){
alert(catid);//catid will be .btn1 id only after clicking .btn1
// else undefined will be returned
}
Use this:
$(".btn2").click(function(){
var catid = $(".btn1").attr("id");
}

(JQuery) I'm wondering why this code doesn't work? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have narrowed it down to the line that declares the 'position'
$(document).ready(function(){
var sliders = new Array("#left","#middle","#right");
var links = new Array("#fLink","#sLink","#tLink");
$(".link").click(function(){
var position = $("#" + sliders[links.indexOf("#" + this.id)]).position().left();
alert(position);
$(".slider").animate({left:gap}, 1500);
});
});
sliders already has the # in it, you don't want to add it again when using it within $(), you end up passing "##left" in as the selector string. Also note that left is a value, not a function, so no () after it.
So:
var position = $("#" + sliders[links.indexOf("#" + this.id)]).position().left();
// Remove -------^^^^^^ and -------------------------------------------------^^
For what you're doing, I wouldn't use a pair of arrays, I'd use:
A lookup object, or
A naming convention, or
A data-* attribute
The last two are trivial, but here's how that first one would work:
$(document).ready(function () {
var sliders = {
"fLink": "#left",
"sLink": "#middle",
"tLink": "#right"
};
$(".link").click(function () {
var sliderSel = sliders[this.id];
if (sliderSel) {
var position = $(sliderSel).position().left;
alert(position);
$(".slider").animate({
left: gap
}, 1500);
}
});
});
Side note: Is gap defined somewhere in code you haven't shown? If not, you'll want to do that.

Categories