finding a particular data-id in a parent container using jquery - javascript

Say if I have the following html:
<a href="some url" class="product-store-name">
azzaharastore
</a>
and this html is contained inside another div, and another div, of x levels. Is there a way to find the div that has the data-id in it and then get the value of it? In other words I want a function that propates upwards and find the data-id in it.

You can use .closest() along with has attribute selector to find the desired element
if this refers to this element then use(replace this with any other means to refer the target element)
var $div = $(this).closest('div[data-id]');
var did = $div.data('id');
or for the above said case
var did = $('.product-store-name').closest('div[data-id]').data('id')
Demo: Fiddle

Related

How to read in an id element that has an href

I am trying to remove the content referenced by the following id:
<...id href="https://xyz'...>
My code:
var right = document.getElementById('https://xyz');
var parent = right.parentNode;
parent.removeChild(right);
The problem is when I reference the name of the id, it comes back as null. I tried document.getElementById('https://xyz').href, yet still null. Any suggestions?
Thanks.
You probably want to use document.querySelector:
var right = document.querySelector('[href="https://xyz"]');
or if you need the n-th match, document.querySelectorAll:
var right = document.querySelectorAll('[href="https://xyz"]')[n];
getElementById as the name suggests, selects an element by id so you have to define an id on your element: id="some_id" and then in JavaScript document.getElementById('some_id')
That's because you did not assign any ID to that tag. So document.getElementById('https://xyz') won't give you anything because there is no tag with this ID.
You have to assign an ID like this:
<...id="ID_of_href" href="https://xyz'...>
Then you can get it with:
document.getElementById('ID_of_href')
First of all we got to understand what is the html id attribute.
Definition and Usage
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet,
and by JavaScript (via the HTML DOM) to manipulate the element with
the specific id.
According to this link: https://www.w3schools.com/tags/att_id.asp.
W3schools is a great web site for you to learn web development.
How to achieve your purpose:
const barElement = document.getElementById('bar');//Getting the element which id is bar.
console.log(barElement);
const fooElement = barElement.parentNode;//Getting bars parent.
console.log(fooElement);
<div id="foo">
<a id="bar" href="#"></a>
</div>

How to replace all id from href?

I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?
You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.
You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()

Javascript how can I get a particular child from an object/element returned by elementFromPoint()?

Is there a way to retrieve the child element from an element/object returned by the function elementFromPoint(x, y);
Suppose I have the following statement,
var elem = document.elementFromPoint(x, y);
And lets assume that the element returned and stored in variable elem would have the following structure:
<section class="wrapper">
some unwraped text
<div class="hidden">
<img />
</div>
</section>
Is there away to retrieve the the img tag from this section wrapper? I am looking to retrieve it and clone it using jQuery and further add the clone to another element. The div wrapping the image tag has a css property of display: none; which will hide the image, I would like to sort of copy that image and reveal it inside some other element.
However I need to find a way to retrieve the img tag before I can clone it and append it further.
EDITED
So this is how I am trying to use the elem object, I need the child img out of it rather than the whole returned element
$('#unique > img').remove();
$('#unique').append($(elem > child)
.clone()
.children()
.end());
I believe I don't need the children() function if I can get the right element right up.
Thank ...
What does elem end up being? The <section>?
$(elem).find('.hidden img')
One of its children?
$(elem).closest('.wrapper').find('.hidden img')
Check if this works:
$("img",$(document.elementFromPoint(x, y)))
or
$(document.elementFromPoint(x, y)).find("img")
var elem = document.elementFromPoint(x, y);
var imageElement = $(elem).find("div.hidden img")

How to get text of element but excluding a child of that element?

I have an HTML snippet:
<li class="as-selection-item">
<a class="as-close">×</a>
Rudy Hamilton
</li>
How can I get the value Rudy Hamilton from li.as-selection-item but without getting the value x from within a.as-close?
Solution 1
document.querySelector('.as-close').nextSibling.nodeValue
JSFiddle demo: http://jsfiddle.net/t8Qst/
It uses nextSibling to get the node right after the element with the as-close class.
Solution 2
If you want to get everything inside the li, except the anchor, you can use this:
var li = document.querySelector('.as-selection-item').cloneNode(true);
li.removeChild(li.querySelector('.as-close'));
alert(li.textContent);
You clone the li, remove the anchor from the clone, and just display its text.
JSFiddle demo: http://jsfiddle.net/58pLz/
With jQuery (in case you're already using it), this'd give this:
var li = $('.as-selection-item').clone();
$('.as-close', li).remove();
alert(li.text());
Using jQuery you can use this:
$(".as-selection-item").text();
This will return all the thext inside .as-selection-item and not the html
If you only want the text inside .as-selection-item (not in the anchor) you can use this:
$(".as-selection-item").clone().children().remove().end().text();
This clonese the object, removes the children, and returns the text.
Fiddle

How can I get img src and text from distant elements using JQuery?

Could you please lend a hand as I am having some trouble getting the text of a heading and the source of an image element in order to create a list of the item clicked. But I will explain better with some code:
Firstly I have a div element that goes like this:
<div class="main_page_entry">
<div class="main_item_desc">
<img class="main_item_pic" src="blah.jpg" />
<h6>Item Title</h6>
<span class="icon"> <img src="icon.png" /></span><br />
<span class="address">Some address</span>
<p class="item_desc">More blahs and links for description </p>
</div>
<div class="item_controls">
...
<a href="#" class="add_to_list">
<img src="add_icon.gif" />Add to List
</a>
...
</div>
</div>
It consists with a big div containing two smaller. What I want to do is the following: When I click on 'Add to List' link, I would like to get just the text inside and the main_item_pic source in order to create a list item with those two.
So here is my written code so far:
$('a.add_to_list').live('click', function() {
var name = $(this).closest('h6').text();
var source = $(this).closest('.main_item_pic').src;
$('<li class="hide list_entry"><span class="entry_title">'+
name+'</span><button class="remove_entry"></button>'+
'<img class="list_entry" src="'+source+'" /></li>')
.appendTo('#favs_list ul')
.show('slow');
});
Obviously this doesn't work! I've tried different solutions that I read around here like:
var name = $(this).closest('h6').html();
var source = $(this).closest('.main_item_pic').attr('src');
but oh well...no luck so far. Any ideas? Thanks in advance!
Try going back to the top and coming down again along the right DOM branch:
var src = $(this).closest('.main_page_entry') // Back to the top
.find('.main_item_desc .main_item_pic') // And down again.
.attr('src');
The closest method goes up the DOM tree through your ancestors:
Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.
So it won't cross over to any of the sibling branches. Then, once you're at the appropriate ancestor, you use find to come back down, find is just like $() but uses the specified element rather than document as the root:
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
The closest method only finds the closest ancestor that matches the selector you pass it. Because the h6 and img you are looking for are not ancestors of the element you are calling it on, it won't find them. What you need is to find the closest element that contains both the element you are searching from and the elements you are trying to find, and use it as an intermediate step in the search:
var name = $(this).closest('.main_page_entry').find('h6').text();
var source = $(this).closest('.main_page_entry').find('.main_item_pic').attr('src');
First off, if this content isn't added dynamically or in a live manner (in other words, if the content is loaded with the original HTML load) then you do not have to use the .live() function.
Also, why are you using .closest()? Couldn't you just do:
<img class="main_item_pic" ref='pic1' src="blah.jpg" />
<a ref='pic1' href="#" class="add_to_list">
<img src="add_icon.gif" />Add to List
</a>
$('a.add_to_list').click(function(){
var ref = $(this).attr('ref');
var src = $("img[ref='" + ref + "']").attr('src');
var name = $('h6 a').text();
});
The method closest() looks for ancestors. Your h6 and img are not ancestors of your link.
Also, I guess you don't want $('h6').html() but $('h6 a').html()

Categories