Jquery and JS get the li tag in ul
js Get all li under the element
var content=document.getElementById("content");
var
items=content.getElementsByTagName("ul");
var
itemss=items[2].getElementsByTagName("li");//Get the second li tag
or
var p=document.getElementById('a');
var ul=p.childNodes.item(0);
var lis=ul.childNodes;
for(var
i=0;i
}
How to use jquery to get the last li under each ul
$(function(){
##$("ul").each (function(){
var y = $(this).children().last();
alert (y.text());
});
});
##jquery Gets the
- clicked
- ##
- Answer list
- Question List
- Satisfaction List
Click that one and append the class="qhbg" style to that
For example: click answer The list becomes
## " >Points list
$ (function(){
$('.anserdh li a').click(function(){
$('.anserdh li') .removeClass('qhbg');
$(this).parent().('qhbg');
})Some learning about .each() traversing elements in jqueryHow jquery locates the penultimate element. For example, if there are 5 uls in a p, how can jquery lock the penultimate ul, second ul, and first ul style
$("p ul").eq(-1)$("p ul").eq(-2) $('ul li<a href="http://www.php.cn/wiki/972.html" target="_blank">:first-child</a>').css( 'backgroundColor', '#000');
##<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>tab选项卡</title>
<style type="text/css">
ul,li{list-style: none;margin: 0px; padding: 0px;}
li{float: left;width: 80px; height: 30px; background-color: #ccc; border: 2px solid #fff;text-align:center; line-height:30px;}
#content{clear:left; width:336px; height: 180px; background-color: #999; color:white;}
#content p{display: none}
#content .consh{display: block;}
#title .titsh{background-color: #999;border:2px solid #999; color:#fff}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("li").each(function(index){
$(this).mouseover(function(){
$("#title .titsh").removeClass("titsh");
$("#content .consh").removeClass("consh");
$(this).addClass("titsh");
$("#content>p:eq("+index+")").addClass("consh");
})
})
})
</script>
</head>
<body>
<p id="tab">
<p id="title">
<ul>
<li class="titsh">选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
</p>
<p id="content">
<p class="consh">内容一</p>
<p>内容二</p>
<p>内容三</p>
<p>内容四</p>
</p>
</p>
</body>
</html>
css selectors to unique ones, I found that the problem still exists, so I judged that it should be here:
$("#title .titsh").removeClass("titsh");
$("#content .consh").removeClass("consh");
$(this).addClass("titsh");
$("#content>p:eq("+index+")").addClass("consh");
第一句，第二句取出样式的时候，没有问题，第三局给当前的li标签加上titsh的css样式也正常，就是最后一句 给通过p：eq（index）获取到的p区块加样式的时候失败。
于是我在$("li").each(function(index){
$(this).mouseover(function(){
这两句之间加了一个alert（index）弹窗，看看效果，发现有10几个li标签的索引值被alert出来，一想原来实际这个页面中还有其他的li标签，所以导致each（）迭代出来的索引值和下面p区块的索引值对应不上，这样上面li标签变动的时候，下面的p区块就不跟着变了，于是我将js代码改了一下：
<script type="text/javascript">
$(function(){
$("#title ul li").each(function(index){
$(this).click(function(){
$("#title .titsh").removeClass("titsh");
$("#content .consh").removeClass("consh");
$(this).addClass("titsh");
$("#content > p:eq("+index+")").addClass("consh");
})
})
})
</script>##For the li elements to be iterated with .each() The selector has been restricted so that it can only find the li tag in my tab to extract the index value. The problem is solved and I can go to sleep!
The above is the detailed content of Jquery and JS get the li tag in ul. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Where to get Google security code
Mar 30, 2024 am 11:11 AM
Google Authenticator is a tool used to protect the security of user accounts, and its key is important information used to generate dynamic verification codes. If you forget the key of Google Authenticator and can only verify it through the security code, then the editor of this website will bring you a detailed introduction on where to get the Google security code. I hope it can help you. If you want to know more Users please continue reading below! First open the phone settings and enter the settings page. Scroll down the page and find Google. Go to the Google page and click on Google Account. Enter the account page and click View under the verification code. Enter your password or use your fingerprint to verify your identity. Obtain a Google security code and use the security code to verify your Google identity.
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
How to install dual SIM on Realme 12 Pro?
Mar 18, 2024 pm 02:10 PM
Although the general operations of domestic mobile phones are very similar, there are still some differences in some details. For example, different mobile phone models and manufacturers may have different dual-SIM installation methods. Erzhenwo 12Pro, a new mobile phone, also supports dual-SIM dual standby, but how should dual-SIM be installed on this phone? How to install dual SIM on Realme 12Pro? Remember to turn off your phone before installation. Step 1: Find the SIM card tray: Find the SIM card tray of the phone. Usually, in the Realme 12 Pro, the SIM card tray is located on the side or top of the phone. Step 2: Insert the first SIM card. Use a dedicated SIM card pin or a small object to insert it into the slot in the SIM card tray. Then, carefully insert the first SIM card.
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
How to get free chat times in Taqu How to get free chat times in Taqu
Mar 12, 2024 pm 03:58 PM
How to get free chat times in Taqu? Taqu is a very easy-to-use chat and dating software that has helped countless single friends find their ideal partner. In this software, we can easily chat with many netizens and find the one who best fits our soul. However, recently some users found that their free chats had been exhausted when using the software. So, how to solve it? The editor has brought you a way to get free chat times. Friends who are interested should take a look. How to get free chat times with Taqu: First, open Taqu on your phone. Then click on the avatar in the personal homepage. Then click on "Make Friends" below. Finally, we can choose a way to make friends to chat with others. Each of them is
How to get Huang Rong in the mobile game Shooting Condor
Mar 27, 2024 pm 10:36 PM
The Condor Mobile Game is about to be officially launched. Many players want to know how to obtain Huang Rong. Players must first download the [NetEase Master] APP, then join the [Condor Circle] and participate in the Condor Mini Game: SSR Huang Rong will be given for free. How to obtain Huang Rong in the mobile game Condor Shooting 1. First, download the [NetEase Master] APP, and then join the [Condor Shooting Circle]. 2. Go to the Condor Shooting Circle, slide up the page to display the page as shown below, and click [Carving Treasure]. 3. You can also click on the [Play Diaobao Mini Game: SSR Huang Rong for Free] as shown by the arrow in the picture below. 4. Then enter the Diaobao page and click [Yunyou Zhongdu] at the bottom. This is an idle device. Just select the time and direction. 5. Travel around at least six times, choosing a different time and direction each time. 6. Click to claim
How to get fake future crystal coins
Mar 22, 2024 am 08:00 AM
Many players want to know how to obtain fake future crystal coins. There are actually four different methods, including purchasing gift packages, completing tasks, producing goods, developing land, etc. Players can choose different ways to earn crystal coins according to their needs. The specific content is as follows: Get up and take a look at this guide on how to obtain fake future crystal coins. Fake Future Guide: How to get Fake Future Crystal Coins 1. Purchase the gift package mall to purchase the crystal coin gift package. 2. Obtained by completing tasks and completing main and side tasks. 3. Produce goods. Produce goods in your home to obtain crystal coins. 4. Developing land can also be obtained by developing land, but the reward is one-time.
