I'm dynamically adding list items to a ul
<ul>
<li>thing 1</li>
<li>thing 2</li>
<li class='colorblock'>thing 3</li>
<li class='colorblock'>thing 4</li>
<li>thing 5</li>
</ul>
In some situations I need to enclose a few of the li with the following
$('.colorblock:first').before('<li>[± </li>');
$('.colorblock:last').append('<li>]</li>');
that products the following
<ul>
<li>thing 1</li>
<li>thing 2</li>
<li>[± </li>
<li class='colorblock'>thing 3</li>
<li class='colorblock'>thing 4</li>
<li>]</li>
<li>thing 5</li>
</ul>
now, if I also may need to remove those two li's with something along the following
$('li').filter(function() { return $.text([this]) === '[± '; }).remove();
$('li').filter(function() { return $.text([this]) === '[± '; }).remove();
$('li').filter(function() { return $.text([this]) === ']'; }).remove();
my problem is that none of these are correctly matching to
<li>[± </li>
I've ran out of ideas on how to strictly match and remove that li. any suggestions?
Try
$('li').filter(function(){
var txt = $.trim($(this).text());
return txt == '[±' || txt == ']'
}).remove()
Demo: Fiddle
Turns out it was an encoding issue with the file it was in, needed to be UTF-8
Related
i'm having an unordered list with several elements and i'm using jquery sortable for moving items around - here's my markup:
<ul>
<li id=1>item 1</li>
<li id=2>item 2</li>
<li id=3>item 3</li>
<li rel=2>insert</li>
<li id=4>item 4</li>
</ul>
the "insert" element is related to the LI having ID 2 - my question:
what's the best practice for determing if the related item is above or below the "insert" element? (in this case: above)
if($(this).prevAll("[id=2]").length > 0)
{
//element is above
}
if($(this).nextAll("[id=2]").length > 0)
{
//element is below
}
You can use nextAll and prevAll functions of jquery for this. Here $(this) refers to insert element.
You can use the index function to get the place of the element and compare it to other elements:
inserted = $('li[rel=2]');
$('ul li').click(function() {
if (inserted.index() > $(this).index()) {
console.log('Clicked element is above');
} else if (inserted.index() < $(this).index()) {
console.log('Clicked element is below');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id=1>item 1</li>
<li id=2>item 2</li>
<li id=3>item 3</li>
<li rel=2>insert</li>
<li id=4>item 4</li>
</ul>
I am trying to parse a web page with JavaScript targeting list <li> without class.
<ul id="cartItems">
<li class="heading">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Use querySelectorAll to get all li elements without a class.
var liWithoutClass = document.querySelectorAll('#cartItems > li:not([class])');
console.log(liWithoutClass);
document.write(liWithoutClass[0].textContent); // Output the first li
document.write('<br />' + liWithoutClass[3].textContent); // Output the last li
<ul id="cartItems">
<li class="heading">Heading</li>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
var elems = document.querySelector(".heading");
console.log(elems);
//Now we strip the class out like this:
elems.setAttribute(class, "none");
//Now we display the updated values below
console.log(elems);
// This won't work in Stack's editor, so you'll have to validate it against the page you want.
//Now, just grab the entire element by id from the page as below:
var updatedContent = document.getElementById("cartItems");
console.log(updatedContent);
//Again, stack's editor is limited, but overall this should work fine on your page.
<ul id="cartItems">
<li class="heading">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
is there a way using javascript to find a specific string and delete its' html element.
For example, I have this following html code:
<div class="summary">
List of texts:
<ul>
<li>Text 0</li>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</div>
and I want to hide "Text 2", first I want to find this string and then hide it.
what I've tried is using html().replace but it hides only the text not the element.
JSFiddle
In jQuery there is :contains
$('.summary li:contains(Text 2)').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summary">
List of texts:
<ul>
<li>Text 0</li>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</div>
Your fiddle is pretty close. Here's an updated version removing the element from the DOM.
$('.summary li').each(function() {
var $this = $(this);
if ($this.text() === 'Text 2') {
$this.remove();
}
});
http://jsfiddle.net/sLa3dkdd/3/
Iterrate over li elements, check if the text content is the searched value, then hide or remove the element.
$(function() {
$('.summary li').each(function() {
var $this = $(this);
if($this.text() === 'Text 2'){$this.hide();}
});
});
using JQuery you can do it like that :
$('.summary ul').children().each(function () {
if($(this).text() == searchedValue) {
$(this).hide();
}
})
I have list with id myid. I can get values li values like this $('#' + i).text(). But I am using $( '#myid' ).sortable() . How can get values in currently displayed order? Demo here. I need to implement function in stop:
<ul id='myid'>
<li id='1'>value 1</li>
<li id='2'>value 2</li>
<li id='3'>value 3</li>
<li id='4'>value 4</li>
<li id='5'>value 5</li>
</ul>
Use .each() with .text() : Updated Fiddle
stop:function(){
$('li',this).each(function(){
alert($(this).text())
});
}
or map() to get them into array.
stop:function(){
var $li= $('li',this).map(function(){
return $(this).text()
});
alert($li)
}
I have a menu in Wordpress that uses WP Menu system. All links are basically custom links that output the following (WP classes removed for brevity):
<ul>
<li>About
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</li>
</ul>
I'm trying to remove the domain part of the URL if the parent page is being viewed so if I were viewing the About page the links in the menu would change to:
<li>About
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</li>
</ul>
The problem I have with jQuery is that I cannot target each specific page because the pages will be unknown, I therefore need it to get the URL and match it with the correct part of the menu to change the links. I have tried this but its too specific:
if (window.location.href.indexOf("about") != -1) {
//do something
} else {
//do something else
}
EDIT
I only want to alter the links in the menu for the current page. The answers so far change all of the link in the menu, I just want to target the links found on the same page.
DEMO here
Firstly add a class sections to the ul element to make it easy to target.
<ul class="sections">
<li>Section 1
</li>
<li>Section 2
</li>
<li>Section 3
</li>
</ul>
Use .map() to replace the href for each anchor.
EDIT - based on your new update & I liked #Archer's update too. This should work.
$(".sections a[href* = '" + window.location.pathname + "/#']").map(function(){
var currentsection = this.href.split('/').pop();
this.href = currentsection;
});
Another option...
$(function() {
$("a[href*='" + window.location.pathname + "#']").attr("href", function() {
return "#" + this.href.split("#")[1];
});
});
This will find all the links with the current page and a # in them and fix the href value accordingly.
Try this,
$('a').each(function(){
// check the anchor tab href has location.href or not
if($(this).attr('href').indexOf(window.location.href) != -1)
{
// some code to replace location.href to blank
var href=$(this).attr('href').replace(window.location.href,'');
$(this).attr('href',href);
}
});
Alternatively, try this,
$('a').each(function(){
if(this.href.indexOf('#') != -1)
{
var href=this.href.split('#')[1];
this.href = '#'+href;
}
});