Develop Reference

jQuery get attibutes and values from all elements inside a class

I'm scraping a website where it has the following HTML structure
<div id="list" class="book-list">
<div id="stream_1" class="stream collapsed">
<h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3>
<div class="volume last">
<h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922893" class="new">
<span>
<a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a>
</span>
<i>Yesterday 08:27 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
<div id="stream_5" class="stream">
<h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3>
<div class="volume last">
<h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922873" class="new">
<span>
<a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a>
</span>
<i>Yesterday 08:10 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
</div>
I want to use jQuery to get the links from the divs to get something like this
{
"vol.1 ch.1" : "link/1",
"ch.2" : "link/2"
}
As all the items i want has the class ch sts i wanted to get them with the selector, and trying to use each() but didn't work as it shows nodes...
Here's what how i'm trying:
$d('.ch').map(function(){
console.log('This: href',$(this).attr("href"));
}).get();

It is simpler than you thought. Since you've mentioned that you only want to parse links with ch sts classes, I changed the selector.
var map = {};
$(".ch.sts").each(function() {
map[$(this).text()] = $(this).attr("href");
});
console.log(map);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list" class="book-list">
<div id="stream_1" class="stream collapsed">
<h3 id="s-1" rel="1"><div><a name="st_1" class="st st_1">Version 1</a></div></h3>
<div class="volume last">
<h4 id="v-1-1">Volume 1<span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922893" class="new">
<span>
<a class="ch sts sts_1" target="_blank" href="link/1">vol.1 ch.1</a>
</span>
<i>Yesterday 08:27 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
<div id="stream_5" class="stream">
<h3 id="s-5" rel="5"><div><a name="st_5" class="st st_5">Version 2</a></div></h3>
<div class="volume last">
<h4 id="v-5-">Volume <i>[Null]</i><span class="range">Chapter 1</span></h4>
<ul class="chapter">
<li id="b-922873" class="new">
<span>
<a class="ch sts sts_5" target="_blank" href="links5/c1/1">ch.1</a>
</span>
<i>Yesterday 08:10 am</i>
<em>
1
3
6
10
all
of 44 </em>
</li>
</ul>
</div>
</div>
</div>

Get all the Elements with class name.
Get the text value and "href" attribute.
x = document.getElementsByClassName("ch sts");
for(i =0; i<x.length; i++) {
console.log(x[i].text +" "+ x[i].getAttribute("href"));
}

Hiding and showing fields via Javascript based on the type of the category the results item has

I have a dynamic list of properties on a search results page, the problem I am having on each individual search result is that if it is a certain property type i.e. Land it does not need the bedrooms and bathrooms fields within that search result to show, but if it is a Villa, the fields would show.
I would need to show and hide fields on the page load in JS like my example above on each individual search result as if I do a general JS function for Land hiding the div classes for bedrooms and bathrooms, there could also be a Villa on the page needing those fields.
If anyone could help with some JS to help me solve this issue above, it would be much appreciated!
Heres some of the Html Results below, you will see there are multiple property types, so different fields should be show/hidden
<div class="property-listing">
<ul>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=615237" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=NEW LISTING&imageURL=487/Sales/615237/615237_7969.jpg" alt="Villa in Javea">
<span class="images-count">
<i class="fa fa-link"></i>
MidasS
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>115.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=615237" title="Villa in Javea">
Villa in Javea
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Alicante, SPAIN</span>
<p>A beautiful and rustic style 'home' offering spectacular views over the coast, the mountains and the Mediterranean Sea.</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>2</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=638700" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=REDUCED&imageURL=487/Sales/638700/638700_1145.jpg" alt="Apartment in Famagusta">
<span class="images-count">
<i class="fa fa-link"></i>
PRO1011
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>155.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=638700" title="Apartment in Famagusta">
Apartment in Famagusta
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Famagusta, CYPRUS</span>
<p>hnglkrehnblarjl;kbkhmtr;mnb;rstlmnstrn</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>0</strong>Bedrooms</span>
<span id="spbaths"><strong>0</strong>Bathrooms</span>
<span id="sppool"><strong>No</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=636364" class="property-featured-image"><div class="overlay" style="line-height:188px"><i class="fa fa-search"></i></div>
<img src="http://example.com/487/Sales/636364/636364_5562.jpg" alt="Country House in Not Specified">
<span class="images-count">
<i class="fa fa-link"></i>
cyc130
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>175.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=636364" title="Country House in Not Specified">
Country House in Not Specified
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Andalucia, SPAIN</span>
<p>;.lkijuhygtfrdeswaq</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>3</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<br> <br>
<div class="pagination">
<span class="disabled"><i class="fa fa-chevron-left"></i></span>
1
2
3
4
<i class="fa fa-chevron-right"></i>
</div>
</ul>
</div>

I'm just gonna go ahead and make up my own HTML structure to demonstrate the simple if/else statement you would make with jQuery.
function hideFields() {
$(".result").each( function() {
if ( $(this).hasClass("land") ) {
$(this).children(".bedroom").hide();
$(this).children(".bathroom").hide();
}
else if ( $(this).hasClass("villa") ) {
$(this).children(".land-area").hide();
}
});
}
hideFields();
span {
display:block;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="result villa"><b>Villa</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
<br>
<div class="result land"><b>Land</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
Your HTML seems confusing for multiple reasons, which you can easily fix to use this method:
1) sppools, spbaths, spbeds should indeed be classes rather than IDs. This is due to IDs being unique identifiers - they should hence not appear more than once on each page, whereas classes identify a "type" (class) of item, which may appear multiple times. Multiple instances of the same ID will mess with your CSS and JS.
2) There is no clear definition within each result of what type of result this is (or I can't seem to find it, at least?).
Words like "villa" or "house" indeed appear in the title-tag, but having to search within these is an inefficient way of performing the action.
Instead, make your code show the type of content as a class on each li-item or the initial div-item.

How to select only one li element using javascript?

This should be an easy fix but I just can't wrap my head around javascript selectors just yet. I have a list of h3 li elements that each contain content that is shown on click. I want a toggle arrow to change from up to down on click. But with the JS code below this happens for all li elements including the one for which the collapsed content is not showing. How can I fix this?
$(document).ready(function () {
$('#toggle-view li').click(function () {
var text = $(this).children('div.panel');
if (text.is(':hidden')) {
text.slideDown('200');
$("h3 .fa-caret-up").removeClass("fa-caret-up").addClass("fa-caret-down");
} else {
text.slideUp('200');
$("h3 .fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-up");
}
});
});
Here is the html in case you need it:
<ul class="services-ul facebook-ul" id="toggle-view">
<li>
<h3><i class="fa fa-check"></i>Header 1<i class="fa fa-caret-up"></i></h3>
<span>+</span>
<div class="panel">
<p>dummy text...</p>
</div>
</li>
<li>
<h3><i class="fa fa-check"></i>Header 2<i class="fa fa-caret-up"></i></h3>
<span>+</span>
<div class="panel">
<p>dummy text...</p>
</div>
</li>
<li>
<h3><i class="fa fa-check"></i>Header 3<i class="fa fa-caret-up"></i></h3>
<span>+</span>
<div class="panel">
<p>dummy text...</p>
</div>
</li>
<li>
<h3><i class="fa fa-check"></i>Header 4<i class="fa fa-caret-up"></i></h3>
<span>+</span>
<div class="panel">
<p>dummy text...</p>
</div>
</li>
</ul>

You need to specify the elements relative to this (which within your click event is the li element which has been clicked on).
Simply wrap this in a jQuery selector ($(this)), then use jQuery's find() method to find the elements contained within it:
$(this).find('.fa-caret-up').removeClass('.fa-caret-up').addClass('.fa-caret-down');
And:
$(this).find('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-up');

jQuery emptying wrong div? [duplicate]

This question already has answers here:
How to append one jQuery element already in the DOM to another element?
(5 answers)
Closed 3 months ago.
I've been working on a filter plugin using HTML5's data-* attribute, but jQuery (or something) keeps emptying the wrong div.
Basically I have two divs with different classes. '.gallery-source' is the class of the div with ALL of the content (and the 'display' property is set to 'none' value, so it doesn't show up in the document); while '.gallery' on the first hand is empty but then given the contents of '.gallery-source'.
Once the user has selected options to filter in the dropdowns (an unordered list of items, with links that have data-* values matching some of the contents of '.gallery-source' data-* values), the '.gallery' div is emptied and then each matching content (same data-* values as set in the dropdowns) of '.gallery-source' is appended inside '.gallery'.
The code looks something like this:
// Append everything from .gallery-source to .gallery in order to show ALL work (filters may be applied later)
var gallerySource = $('.works-content .gallery-source').html();
$('.works-content .gallery').html(gallerySource);
// Attribute filtering for all work inside .gallery
$('ul#artist-dropdown li a, ul#technique-dropdown li a, ul#material-dropdown li a').on('click', function() {
// Get selected filter on form
var artistFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.artist > span').attr('data-filter-artist');
var techniqueFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.technique > span').attr('data-filter-technique');
var materialFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.material > span').attr('data-filter-material');
// Empty .gallery in order to fill it later with filtered work
$('.works-content .gallery').empty();
// Get filtered elements and append them to .gallery
$('.single-work[data-artist~="' + artistFilterValue + '"][data-technique~="' + techniqueFilterValue + '"][data-material~="' + materialFilterValue + '"]').each(function(){
$('.works-content .gallery').append($(this));
});
});
The document initially looks like this (both '.gallery' and '.gallery-source' are populated):
<div class="row works-content">
<div class="row">
<div class="small-12 medium-12 large-12 columns filter-dropdowns">
<div class="dropdown-wrapper">
Filtrar por:
<span class="dropdown-label">Artista</span>
<span data-filter-artist="all">Seleccionar</span> <i class="fa fa-chevron-down"></i><br>
<ul id="artist-dropdown" data-dropdown-content="" class="f-dropdown">
<li><span data-filter-artist="all">Todos</span></li>
<li><span data-filter-artist="name-one">Name One</span></li>
<li><span data-filter-artist="name-two">Name Two</span></li>
</ul>
</div>
<div class="dropdown-wrapper">
Técnica:
<span data-filter-technique="all">Seleccionar</span> <i class="fa fa-chevron-down"></i><br>
<ul id="technique-dropdown" data-dropdown-content="" class="f-dropdown">
<li><span data-filter-technique="all">Todos</span></li>
<li><span data-filter-technique="acrylic">Acrílico</span></li>
<li><span data-filter-technique="mixed-paper">Mixta sobre papel</span></li>
<li><span data-filter-technique="mixed-fabric">Mixta sobre tela</span></li>
<li><span data-filter-technique="oil">Óleo</span></li>
</ul>
</div>
<div class="dropdown-wrapper">
Soporte:
<span data-filter-material="all">Seleccionar</span> <i class="fa fa-chevron-down"></i><br>
<ul id="material-dropdown" data-dropdown-content="" class="f-dropdown">
<li><span data-filter-material="all">Todos</span></li>
<li><span data-filter-material="fabric">Tela</span></li>
<li><span data-filter-material="paper">Papel</span></li>
</ul>
</div>
<ul class="button-group filter-buttons">
<li class="active show-all">Todas</li>
<li class="show-available">Disponibles</li>
<li class="show-sold">Vendidas</li>
</ul>
</div>
</div>
<div class="row gallery-source">
<div data-artist="name-one all" data-technique="oil all" data-material="paper all" class="small-12 medium-4 large-4 columns single-work available-work">
<a class="work-lightbox" href="img/work/name-one/3.jpg">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-one/3.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-one.png">
</a>
<a href="" class="artist-name">
<h2>Name One <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código SUA1005</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Papel</li>
<li>Técnica: Óleo</li>
</ul>
</div>
<div data-artist="name-two all" data-technique="acrylic all" data-material="fabric all" class="small-12 medium-4 large-4 columns end single-work sold-work">
<a class="work-lightbox" href="img/work/name-two/5.jpg">
<img class="sold" src="img/work/sold.png">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-two/5.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-two.png">
</a>
<a href="" class="artist-name">
<h2>Name Two <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código SUA1005</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Tela</li>
<li>Técnica: Acrílico</li>
</ul>
</div>
</div>
<div class="row gallery">
<div data-artist="name-one all" data-technique="oil all" data-material="paper all" class="small-12 medium-4 large-4 columns single-work available-work">
<a class="work-lightbox" href="img/work/name-one/3.jpg">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-one/3.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-one.png">
</a>
<a href="" class="artist-name">
<h2>Name One <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de Obra"</li>
<li>Código ejemplo</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Papel</li>
<li>Técnica: Óleo</li>
</ul>
</div>
<div data-artist="name-two all" data-technique="acrylic all" data-material="fabric all" class="small-12 medium-4 large-4 columns end single-work sold-work">
<a class="work-lightbox" href="img/work/name-two/5.jpg">
<img class="sold" src="img/work/sold.png">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-two/5.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-two.png">
</a>
<a href="" class="artist-name">
<h2>Name Two <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código ejempl5</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Tela</li>
<li>Técnica: Acrílico</li>
</ul>
</div>
</div>
</div>
But after selecting an option in one of the filter dropdowns, '.gallery-source' is empty :(
What am I missing here? I think I'm going crazy!
Anyway, any help will be much appreciated.

.append moves the entire node from .gallery-source to .gallery. You want to do this instead:
$(this).clone().appendTo('.works-content .gallery');
You can read about .clone() here.
Here's a jsFiddle demo.

The API docs of empty also say:
... If we had any number of nested elements inside <div class="hello">, they would be removed, too.
So your $('.works-content .gallery').empty() may remove more than you want it to.

jQuery Cycle Error: Cannot read property 'cycleW' of undefined

Not sure why I'm getting this error and can't figure it out? The cycle works, I'm just getting this error in the console and would like to fix it. That's why I'm here now :)
I'm creating 3 different cycles on the same page with the same selector and using the pager for unique controls. This is what I have currently:
// Cycle Process individual samples - generate unique navs
$('.prospect-carousel').each(function(i) {
$(this).cycle({
fx: 'scrollHorz',
speed: 500,
pager: '.nav-pl' + i,
pagerAnchorBuilder: function(idx, slide) {
return '.nav-pl'+i+' li:eq(' + idx + ') a';
}
}).cycle('pause');
});
HTML:
<h6 class="carbon_heading">Top Prospects</h6>
<ul id="tab-nav" class="nav nav-tabs">
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
<div id="tab-wrap">
<div id="c2012" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl0">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2012 Player Rankings</p>
</div>
<div id="c2013" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl1">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2013 Player Rankings</p>
</div>
<div id="c2014" class="tab-section">
<div class="prospect-carousel">
<div class="prospect-bio">
<span class="info">
<span class="badge">
RANK
<span class="rank">{count}</span>
</span>
<span class="name">{title} <em>{prospects_position_primary} View Bio »</em></span>
</span>
</div>
</div>
<ol class="prospect-list nav-pl2">
<li>{title} <span>{prospects_position_primary}</span></li>
</ol>
<p><i class="icon-th-list"></i> 2014 Player Rankings</p>
</div>
</div>
enter code here

I had Mike (developer of cycle) look at it and he said my third div was causing the issue b/c it was empty. He's going to fix this on the next release.