Let's say that I have a nested <ul> that looks like this:
<ul>
<ul class="pizzatype">
<h1>Margherita</h1>
<li class="ingredient">Tomato sauce</li>
<li class="ingredient">Mozzarella</li>
<li class="ingredient">Origano</li>
</ul>
<ul class="pizzatype">
<h1>Spicy salamino</h1>
<li class="ingredient">Tomato sauce</li>
<li class="ingredient">Mozzarella</li>
<li class="ingredient">Salamino</li>
</ul>
<ul class="pizzatype">
<h1>Onion n' Tuna</h1>
<li class="ingredient">Tomato sauce</li>
<li class="ingredient">Mozzarella</li>
<li class="ingredient">Tuna</li>
<li class="ingredient">Onion</li>
</ul>
</ul>
And a script that console.log the childrens of class "pizzatype":
var pizzatype = document.querySelectorAll('.pizzatype');
console.log(pizzatype[1].children[3]);
The console.log at children[3] returns: <li class="ingredient">Salamino</li>
But I'm looking for a parameter that returns just Salamino
Anyone can help?
Also, is there any reference site that I can consult to find out which parameters can be asked, starting from the children function? Like children.text, children.value etc
Use textContent to get the text of an element
console.log(pizzatype[1].children[3].textContent);
What you're currently doing is pointing to the li element it's self. You need to target the text of this element.
You can do this by using .innerText. You can also use .innerHTML, which will return the text in raw format and won't automatically encode/decode text.
console.log(pizzatype[1].children[3].innerHTML);
Related
I have this HTML code:
<li class="_33c randomtext3" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_comment","from_uids"}">
<li class="_33c randomtext5" data-gt="{"alert_id":1576605904117859,"notif_type":"year_comment","from_uids"}">
<li class="_33c randomtext4" data-gt="{"alert_id":1576605904117859,"notif_type":"group_comment","from_uids"}">
<li class="_33c randomtext7" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_comment","from_uids"}">
<li class="_33c randomtext5" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_comment","from_uids"}">
The order of the lines is varied, (using [2] doesn't work)
I want to delete the <li> with a certain text (data-gt="...group_comment..."), "group_comment" is the certain text (the line 3, sometimes it is on another line).
I tried with document.querySelectorAll('[data-gt]'); with a NodeList(5), but how to find in that NodeList the certain text?
Thank you.
Use the attribute value selector and wildcard selector.
document.querySelectorAll('li[data-gt*=group_comment]')
See https://www.geeksforgeeks.org/wildcard-selectors-and-in-css-for-classes/
const matches = document.querySelectorAll('[data-gt*="group_comment"]')
matches.forEach( x => x.classList.add("hidden") )
.hidden {
display: none;
}
<ul>
<li class="_33c randomtext3" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_comment","from_uids"}"> pub_comment </li>
<li class="_33c randomtext5" data-gt="{"alert_id":1576605904117859,"notif_type":"year_comment","from_uids"}"> year_comment </li>
<li class="_33c randomtext4" data-gt="{"alert_id":1576605904117859,"notif_type":"group_comment","from_uids"}"> group_comment </li>
<li class="_33c randomtext7" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_comment","from_uids"}">pub_comment</li>
<li class="_33c randomtext5" data-gt="{"alert_id":1576605904117859,"notif_type":"pub_comment","from_uids"}">pub_comment</li>
</ul>
You should use attribute selector combined with the contains modifier *
const commments = document.querySelectorAll('[data-gt*="group_comment"]')
You can see the different modifiers here: Attribute Selectors
I have an element like this
<ul>
<li data-ud="321" data-id="42">
<li data-ud="322" data-id="42">
<li data-ud="323" data-id="42">
<li data-ud="324" data-id="42">
<li data-ud="321" data-id="43">
<li data-ud="322" data-id="43">
<li data-ud="323" data-id="43">
<li data-ud="324" data-id="43">
<li data-ud="321" data-id="44">
<li data-ud="322" data-id="44">
<li data-ud="323" data-id="44">
<li data-ud="324" data-id="44">
<li data-ud="321" data-id="45">
<li data-ud="322" data-id="45">
<li data-ud="323" data-id="45">
<li data-ud="324" data-id="45">
</ul>
Now I want to select a element with data-id=45 and data-ud=322. I have tried but it didn't work.
Thanks in advance
To use 'and' in a selector, simply don't use any other separator, eg a li and class myclass would be:
li.myclass
to find by attribute, use [attribute=x], so to combine the two:
li[data-id=45][data-ud=322]
or, with jquery:
$("li[data-id=45][data-ud=322]")
This can be difficult to read and prone to errors eg a space between the two [][] will give a totally different result, so you can instead use filter to the same effect:
$("li").filter("[data-id=45]").filter("[data-ud=322]")
Fiddle example: https://jsfiddle.net/o9fdhphf/
Try the following:
$('li[data-id=45][data-ud=322 ]');
$("[data-ud=322][data-id=45]").text()
OR
$("[data-ud=321] + [data-id=45]").text()
JSFiddle
I have the following HTML:
<ul id="sortable1 venuetags" class="connectedSortable">
<li id="venuetagli">fried</li>
<li id="venuetagli">garlic</li>
<li id="venuetagli">rosemary</li>
<li id="venuetagli">new potatoes</li>
</ul>
And am trying to get the values of each using JQuery:
$('#venuetagli').each(function(j,li) {
console.log(j,li)
})
However, from the console I am only getting the first value returned.
The ids are supposed to must be unique that is why you are getting single element use class selector instead. Also the id of UL would not have space.
Html
<ul id="sortable1 venuetags" class="connectedSortable">
<li class="venuetagli">fried</li>
<li class="venuetagli">garlic</li>
<li class="venuetagli">rosemary</li>
<li class="venuetagli">new potatoes</li>
</ul>
Javascript
$('.venuetagli').each(function(j,li) {
console.log(j,li)
});
You can simple get the li with ul using parent-child selector
$('#sortable1 li').each(function(j,li) {
console.log(j,li)
});
Just for the test and never recommended way, you can get elements having same id using attribute selector.
$('[id=venuetagli]').each(function(j,li) {
console.log(j,li);
});
Id must be assign to a single element in complete page else it will return only one of those element or unexpected result:
Here is demo with class
<ul id="sortable1 venuetags" class="connectedSortable">
<li class="venuetagli">fried</li>
<li class="venuetagli">garlic</li>
<li class="venuetagli">rosemary</li>
<li class="venuetagli">new potatoes</li>
</ul>
and jQuery:
$('.venuetagli').each(function(j,li) {
console.log(j,li)
})
I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>
I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.
I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp
Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});
I am trying to add only select items of a list to a new list. So for example, I only wish to add banana to my second list, the following code in my function adds all the items in coll-selected-list to coll-grouped-list. How may I only make a clone of a specific item. Any tips would be great.
jQuery:
$("#coll-selected-list li").clone().appendTo("#coll-grouped-list");
Markup:
<ul id="coll-selected-list" class="droptrue sort-drop ui-sortable">
<li class="sorted">apple</li>
<li class="sorted">pear</li>
<li class="sorted">banana</li>
<li class="sorted">grape</li>
<li class="sorted">guava</li>
</ul>
<ul id="coll-grouped-list">
</ul>
You can use the :contains selector:
$("#coll-selected-list li:contains('banana')").clone().appendTo("#coll-grouped-list");
Note that the string you pass to :contains is case sensitive.
Here's a working example.
Add a custom data attribute and value to the items you want to clone and then only target items with that data attribute and value.
e.g.
<ul id="coll-selected-list" class="droptrue sort-drop ui-sortable">
<li class="sorted">apple</li>
<li class="sorted">pear</li>
<li class="sorted" data-action="clone">banana</li>
<li class="sorted">grape</li>
<li class="sorted">guava</li>
</ul>
<ul id="coll-grouped-list">
</ul>
$('#coll-selected-list li[data-action="clone"]').clone().appendTo("#coll-grouped-list");
Working Demo:
http://jsfiddle.net/QXEdn/
You can add class to elements which you want to clone e.g.:
<ul id="coll-selected-list" class="droptrue sort-drop ui-sortable">
<li class="sorted">apple</li>
<li class="sorted">pear</li>
<li class="sorted clone">banana</li>
<li class="sorted">grape</li>
<li class="sorted">guava</li>
</ul>
<ul id="coll-grouped-list">
</ul>
// get elements with clone class
$('#coll-selected-list li.clone]').clone().appendTo("#coll-grouped-list");
If you want to clone elements based on index you can use :eq selector:
// clone li containing bannana
$('#coll-selected-list li:eq(2)]').clone().appendTo("#coll-grouped-list");