We Keep Coding

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);
}

Using JSON and underscore.js to link to content [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 8 years ago.
Improve this question
I have a JSON file titled with many different attributes regarding books (author, desc, title etc). I am using JSON to load the content into a div and display only the title. My problem is I'm trying to make each title a link and display the rest of the content for that specific book in a separate div on the same page. Below is what I have so far. Whenever I try to reference anything after the click function my response it "undefined"
$.getJSON("data/data.json", function(data){
var res = _.sortBy(data.books, function(item) { return item.name });
_.each(res, function(item){
$("#books").append("<p class='book'>"+item.name+"</p>");
});
$(".book").click(function() {
var clickedItem = $(this);
$("#details").append("<p>"+clickedItem.author+"</p>");

You could store the details of each book in the data of the node. This way you can access it anytime..
$.getJSON("data/data.json", function(data){
var res = _.sortBy(data.books, function(item) { return item.name });
_.each(res, function(item){
var book = $("<p class='book'>"+item.name+"</p>").data('details', item);
$("#books").append(book);
});
$("#books").on('click', '.book', function() {
var clickedItem = $(this),
details = clickedItem.data('details');
$("#details").html("<p>"+details.author+"</p>");
});
});

Show an individual part of a string as output [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 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/

(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.

click and add div but remove it to other element [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
i'm trying to make a script that when i click on a list it add a div inside the tag <li>, this one is ok, but my problem is that when i click in a other <li> i would like remove the div before inserted how can i do that and i would like remove the class .selected as well? Thanks.
$(document).on('click', '#horiz_container img', function() {
var img_selected = $(this);
var value_sport = img_selected.val();
if (!$(this).closest('li').is('.selected')) {
$(this).closest('li').addClass('selected');
$(this).closest('li').prepend('<div class="selected_sport"><img src="' + CI_ROOT +'resources/img/select.png"></div>');
}
});

Try
$(document).on('click', '#horiz_container img', function () {
var img_selected = $(this), $li = img_selected.closest('li');
var value_sport = img_selected.val();
var $selected = $('#horiz_container .selected').removeClass('selected');
$selected.find('.selected_sport').remove();
$li.addClass('selected');
$li.prepend('<div class="selected_sport"><img src="' + CI_ROOT + 'resources/img/select.png"></div>');
});

$(document).on('click', '#horiz_container img', function() {
var img_selected = $(this);
var value_sport = img_selected.val();
if (!$(this).closest('li').is('.selected')) {
$(this).closest('li').addClass('selected');
**$('.selected_sport').remove();**
$(this).closest('li').prepend('<div class="selected_sport"><img src="' + CI_ROOT +'resources/img/select.png"></div>');
}
});