I have a string with the following content:
var string =
'<div class="product-info-inner-content clearfix ">\
<a href="http://www.adidas.co.uk/ace-17_-purecontrol-firm-ground-boots/BB4314.html"\
class="link-BB4314 product-link clearfix "\
data-context="name:ACE 17+ Purecontrol Firm Ground Boots"\
data-track="BB4314"\
data-productname="ACE 17+ Purecontrol Firm Ground Boots" tabindex="-1">\
<span class="title">ACE 17+ Purecontrol Firm Ground Boots</span>\
<span class="subtitle">Men Football</span>\
</a>\
</div>';
I am trying to perform the JavaScript equivalent of the following Python code, in which uses beautiful soup to grab the URL of the div class element given a product code (i.e. in this case BB4314).
is_listing = len(soup.findAll(name="div", attrs={"class": "product-tile"})) > 1
if is_listing:
# stuck from this part
attrs = {"class": re.compile(r".*\bproduct-link\b.*"), "data-track": code}
url = soup.find(name="a", attrs=attrs)
url = url["href"]
How can I do this?
Just use DOM
var string = '<div class="product-info-inner-content clearfix "><span class="title">ACE 17+ Purecontrol Firm Ground Boots</span> <span class="subtitle">Men Football</span></div>',
div = document.createElement("div");
div.innerHTML = string;
var href = div.querySelector("a.product-link").href,
parts = href.split("/"),
code = parts.pop().split(".")[0];
console.log(code)
console.log(div.querySelector("a.product-link").getAttribute("data-track"))
Related
I attach the relevant extract of the code I am using. What I want to do with the 3 lines which begin "<span id =" is:
to call ItemJ and then use the Item1, Item2 and Item3 links immediately below ItemJ in the section.
to call ItemK and then use the Item1, Item2 and Item3 links immediately below ItemK in the section
Ditto for the third line and ItemL.
The trouble is that it always picks the third group for Item1/2/3 - as I would expect as currently coded.
So is there a way of getting each "<span id=" line to select the group of Item1/2/3 associated with the IndexJ/K/L group I am calling. For various reasons I don't want to give the Item1/2/3 different numbers. Is there a kind of "If" statement I can use which will always select the group of Item/1/2/3 I want?
<span id="ItemJ"></span><P>
<span id="ItemK"></span><P>
<span id="ItemL"></span><P>
<script>
document.getElementById("ItemJ").innerHTML = xBB
document.getElementById("Item1").innerHTML = Bob110
document.getElementById("Item2").innerHTML = ZZ1
document.getElementById("Item3").innerHTML = RadioDGH
document.getElementById("ItemK").innerHTML = xCC
document.getElementById("Item1").innerHTML = Bob125
document.getElementById("Item2").innerHTML = ZZ2
document.getElementById("Item3").innerHTML = QARadio
document.getElementById("ItemL").innerHTML = xAA
document.getElementById("Item1").innerHTML = Bob135
document.getElementById("Item2").innerHTML = ZZ3
document.getElementById("Item3").innerHTML = RadioDGH
</script>
What I'm trying to do is add for each items in a xml file their content to a html page. I'm trying to make it so that every item content is inside an <article> tag. However, It's my first time using jQuery and my end result is not what I want.
let $items = $(xmlContent).find("item");
$items.each(function() {
let title = $(this).find('title').text();
let date = $(this).find('pubDate').text();
let link = $(this).find('link').text();
let guid = $(this).find('guid').text();
let photo = $(this).find('media').html();
$("#world").append("<article></article>", [$("<a>", {
href: link
}) + ("<h3>" + title + "</h3>")]);
This is what the end result currently is:
<article></article>
[object Object]
<h3>Students Fainting From Hunger in Venezuela’s Failing School System</h3>
And what I want it to become:
<article> <a href= myLink <h3>Students Fainting From Hunger in Venezuela’s Failing School System</h3> </a> </article>
I want to apply my link so that everywhere the user click on the content it goes to the link. Hopefully you can guide me. Thanks!
You can build your article element step by step.
Create 'article' as an element, then create your 'a' element. Append the 'h3' element to the 'a' element before appending 'a' to 'article', and then 'article' to '#world'.
let article = $("<article></article>")
let a = $("<a></a>", {href: link})
a.append("<h3>" + title + "</h3>")
article.append(a)
$("#world").append(article)
You're not using append as described in the documentation -- see the type of arguments you can pass.
Maybe you intended this:
$("#world").append(
$("<article>").append(
$("<a>", { href: link }),
$("<h3>").text(title)
)
);
I have some products on a page that I need to grab the Alt tag from. I need to turn them into an Object. After that they need to go into an Array.
I was thinking of creating a for loop to loop through the Alt tags, but I am stuck as to how to Split the Alt tag at the pipe '|'.I keep getting an Invalid or unexpected Token. This is code and below that is what I have.
Right at the end I have the jQuery version that works fine, but I want to know the Vanilla Javascript way. As I want to step away from jQuery and learn how to code better in Javascript.
<div class="product col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12" alt="0016|AUX Cable|2.39|5m|Black|2|Tech-Aux">
<a href="/0016/product">
<img class="productImage" src="/static/store/images/products/download-10.jpg">
</a>
<a href="/0016/product">
<h3>AUX Cable</h3>
</a>
<h4 class="price">£2.39</h4>
<input type="button" class="button style_one addToCartOne" value="Add To Cart">
</div>
<div class="product col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12" alt="0015|USB 2 Type A|3.49|10m|Black|300|Tech-Usb">
<a href="/0015/product">
<img class="productImage" src="/static/store/images/products/download_Jb4ucER.jpg">
</a>
<a href="/0015/product">
<h3>USB 2 Type A</h3>
</a>
<h4 class="price">£3.49</h4>
<input type="button" class="button style_one addToCartOne" value="Add To Cart">
</div>
Here is my code:
var products = document.querySelectorAll('.product');
for(var i=0; i<products.length; i++){
products[i].alt.split(“|”);}
Thank you for any advise. Also any help as to where I can look this up in the future would be great as well.
This is the jQuery code that works. And this is what I want to achieve in Javascript:
var products = [];
$.each($(".product"), function(){
var prodOb = {};
var prodDetails = $(this).attr("alt").split("|");
prodOb.id = prodDetails[0];
prodOb.name = prodDetails[1];
prodOb.price = prodDetails[2];
prodOb.brand = "Some Company";
products.push(prodOb)
})
console.log(products)
You're really close, you've done the big that people find tricky (using the DOM instead of jQuery to find the elements).
Two things:
You seem to have stopped in the middle. You have the code using jQuery to do this, and most of that code has nothing to do with jQuery, but you haven't used that code in your attempt.
You're using fancy quotes (“”), but JavaScript requires boring straight up-and-down quotes (").
If we just copy the code from the sample using jQuery into the code you've already written, and fix the quotes, use elements instead of products to conflict with the array you're creating, use a reasonable placement for }, and add a missing semicolon or two, we get:
var products = [];
var elements = document.querySelectorAll('.product');
for (var i = 0; i < elements.length; i++){
var prodDetails = elements[i].getAttribute("alt").split("|");
var prodOb = {};
prodOb.id = prodDetails[0];
prodOb.name = prodDetails[1];
prodOb.price = prodDetails[2];
prodOb.brand = "Some Company";
products.push(prodOb);
}
console.log(products);
Or we can use Array.prototype.map, but for one it isn't a lot more concise:
var products = Array.prototype.map.call(
document.querySelectorAll('.product'),
function(element) {
var prodDetails = elements.getAttribute("alt").split("|");
return {
id: prodDetails[0],
name: prodDetails[1],
price: prodDetails[2],
brand: "Some Company"
};
}
);
console.log(products);
Note: We have to use .getAttribute("alt") instead of .alt because the HTML is invalid. div elements have no alt attribute. I have to admit in the first version of this question I didn't look at the HTML and assumed that it was valid, where the alt attribute is used on an img element (which has the .alt property).
I am using an ng-repeat in order to list the contents of my data model where the content is being displayed correctly. However, as I am creating a contacts application, I am utilising a circle shape with text inside of it to display the first character from the first name and the first character from the last name, of each contact in the list - my code for this can be seen below:
HTML:
<ul class="collection" ng-show="customers.length">
<li class="collection-item avatar" ng-click="showUserDetail(customer.id)" ng-repeat="customer in customers | orderBy: 'first_name' | filter: searchText" ng-class="{'active': customer.id == selectedUser.id}">
<span ng-init="setContactCircle(customer.first_name,customer.last_name)" id="contact-info" class="contact-circle">TC</span>
<span class="title">{{customer.first_name}} {{customer.last_name}}</span>
<p>{{customer.email}}
<br> {{customer.mobile_number}}
</p>
</li>
</ul>
JS:
$scope.setContactCircle = function(first_name,last_name) {
var strFirst = first_name.charAt(0);
var strLast = last_name.charAt(0);
var strName = strFirst + strLast;
/* span = document.getElementById("contact-info");
txt = document.createTextNode(strName);
span.innerHTML = txt.textContent; */
//document.getElementById("contact-info").innerHTML = strName;
$("#contact-info").text(strName);
console.log(strName);
}
The ng-init appears to be working as the first character from the first name and the first character from the last name are being outputted to the console in 'console.log(strName);' but the text is not being set on the span class.
EDIT
Thank you all for your help where the below has resolved the issue.
HTML:
<span ng-bind="setContactCircle(customer)" id="contact-info" class="contact-circle"></span>
JS:
$scope.setContactCircle = function(customer) {
var strFirst = customer.first_name.charAt(0);
var strLast = customer.last_name.charAt(0);
return strFirst + strLast;
}
Manupulating DOM elements from your controller is a bad Angular design. Instead of using $("#contact-info").text you can user angular data binding.
You are mixing jquery and angular. Both are attempting to manipulate the DOM and they don't typically play nice together.
Could you please try -
<span ng-bind="setContactCircle(customer)" id="contact-info" class="contact-circle"></span>
$scope.setContactCircle = function(first_name,last_name) {
var strFirst = first_name.charAt(0);
var strLast = last_name.charAt(0);
return strFirst + strLast;
}
HTML:
<ul class="collection" ng-show="customers.length">
<li class="collection-item avatar" ng-click="showUserDetail(customer.id)" ng-repeat="customer in customers | orderBy: 'first_name' | filter: searchText" ng-class="{'active': customer.id == selectedUser.id}">
<span ng-init="setContactCircle(customer)" id="contact-info" class="contact-circle">customer.circle</span>
<span class="title">{{customer.first_name}} {{customer.last_name}}</span>
<p>{{customer.email}}
<br> {{customer.mobile_number}}
</p>
</li>
</ul>
JS:
$scope.setContactCircle = function(customer) {
customer.circle = customer.first_name.charAt(0) + customer.last_name.charAt(0);
}
I'm trying to make a custom data attributes on my website in lightbox. I just made it for one element in Javascript and it works fine but I want to make it works in multiple elements.
How it works now: I have "a" element with id="image-1" and I want to make that javascript will recognise id image-2,3,4... and show correct data from custom attributes. Note that I can't use onclick because it makes that lightbox stops work.
Here is HTML:
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
<div class="thumbnail grid-wrapper thumbnail-single">
<a id="image-1" href="img/photo2.jpeg" data-tags="<li>t31232est</li> <li>test</li>" data-fb="http://test1.pl" data-tt="http://test2.pl" data-gplus="http://te23432st3.pl" data-lightbox="roadtrip" data-title="This is a caption. This is a caption This is a caption This is a caption"><img src="img/photo2.jpeg" class="img-responsive" alt="..."></a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
<div class="thumbnail grid-wrapper thumbnail-single">
<a id="image-2" href="img/photo3.jpg" data-tags="<li>test</li> <li>test</li>" data-fb="http://test55.pl" data-tt="http://test253342.pl" data-gplus="http://tes32423t3.pl" data-lightbox="roadtrip" data-title="This is a caption. This is a caption This is a caption This is a caption"><img src="img/photo3.jpg" class="img-responsive" alt="..."></a>
</div>
</div>
Here is JS:
var global = document.getElementById('image-1');
var tagList = global.getAttribute('data-tags');
var facebook = global.getAttribute('data-fb');
var twitter = global.getAttribute('data-tt');
var gplus = global.getAttribute('data-gplus');
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><ul class="tag-list">' + tagList +'</ul><br/><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer">' +
'<ul class="social-list"><li><img src="img/fb_circle_white.png" class="img-responsive"></li><li><img src="img/tt_circle_white.png" class="img-responsive"></li><li><img src="img/gplus_circle_white.png" class="img-responsive"></li></ul><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
I'm trying to make it works on Lightbox Plugin (http://lokeshdhakar.com/projects/lightbox2/)
UPDATE
I just used function in onclick and when I'm testing it, it shows correct IDs. But still can't put it into getElementByID as a string.
id="image-1" onclick="GetID(this.id)"
window.GetID = function(elem_id){
alert(elem_id);
}
var global = document.getElementById(GetID());
var tagList = global.getAttribute('data-tags');
var facebook = global.getAttribute('data-fb');
var twitter = global.getAttribute('data-tt');
var gplus = global.getAttribute('data-gplus');
UPDATE 2:
Almost done. I've made my variables global. Console log shows correct ID and other data attribs. Problem is when I'm trying to put result into html in javascript. Here is example.
<ul class="social-list"><li><img src="img/fb_circle_white.png" class="img-responsive"></li>
+ current JS:
id="image-1" onclick="window.GetID(this.id)"
var global;
var tagList;
var facebook;
var twitter;
var gplus;
window.GetID = function(elem_id){
console.log(elem_id);
global = document.getElementById(elem_id);
console.log(global);
tagList = global.getAttribute('data-tags');
console.log(tagList);
facebook = global.getAttribute('data-fb');
console.log(facebook);
twitter = global.getAttribute('data-tt');
console.log(twitter);
gplus = global.getAttribute('data-gplus');
console.log(gplus);
}
+ image of console response.
A good solution would be to get the id attribute of 'a' element when clicking it put it in a var and use it to get data attributes.
Assuming 'a' elements are inside a div '#container' here is my solution
$('#container a').click(function(){
var image_id = '#' + $(this).attr('id');
var tagList = $(image_id).data('tags');
var facebook = $(image_id).data('fb');
var twitter = $(image_id).data('tt');
var gplus = $(image_id).data('gplus');
});
not sure if I am understanding correctly. But if the id of the divs are consistent, meaning image-1, image-2, image-3,... and so on, you could use and expression selector and loop through the number of elements in that array to add/append your dynamic html inside those divs without using a click event to get the id. Ex -
var array_of_divs = $("div[id^=image-]") // this gives you an array of all the element having the id starting with 'image-'
further you can loop though the length of this array and add your dynamic html based on the id of the parent : ("image-"+counter_variable])
let me know if this helps.