访问特定的 DOM 元素 [关闭]答案

【问题标题】：Accessing a particular DOM element [closed]访问特定的 DOM 元素 [关闭]
【发布时间】：2014-12-02 08:04:00
【问题描述】：

如何访问<li>jQuery is for chumps!</li> 元素？它没有身份证，所以我不知道该怎么办。我要把它存储在一个变量中

<!DOCTYPE html>
<html>
    <head>
        <title>Simplify, Simplify</title>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div> Remember!
            <ul>
                <li>
                    <ol>
                        <li>Start with the function keyword</li>
                        <li>Inputs go between ()</li>
                        <li>Actions go between {}</li>
                        <li>jQuery is for chumps!</li>
                    </ol>
                </li>
                <li>Inputs are separated by commas.</li>
                <li>Inputs can include other functions!</li>
            </ul>
        </div>   
    </body>
</html>

【问题讨论】：

它可以像$('li:contains("jQuery is for chumps!")') 一样简单。您可以使用许多遍历方法，使用它们：api.jquery.com/category/traversing
你想要li的内容还是位置？
什么是基于...li的内容或其位置的选择
@FelixKling 仅使用 li 可能无法解决问题，因为还有一个父 li - jsfiddle.net/arunpjohny/1db8boq2/2

标签： javascript jquery css

【解决方案1】：

你可以这样做：

var selector = $('ol li:last');

更具体的做法是向父 div 添加一个 id 或一个类，然后这样做：

var selector = $('#parent ol li:last');

或者，如果它可以在您的 ol 中的任何位置，那么您可以使用 contains：

var selector = $('#parent ol li:contains("jQuery is for chumps!")');

【讨论】：

您要查找的 li 实际上是 'ol' 而不是 'ul' 的最后一个孩子
不会选择<li>Inputs can include other functions!</li>吗？

【解决方案2】：

你可以在这里使用多个选择器

//using the contents of the li, using contains() can return partial matches so need to be careful about it
$('ul ol li').filter(':contains("jQuery is for chumps!")').css('color', 'red');
//using the position - it targets the last child of the ol element
$('ul ol li:last-child').css('background-color', 'green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Remember!
  <ul>
    <li>
      <ol>
        <li>Start with the function keyword</li>
        <li>Inputs go between ()</li>
        <li>Actions go between {}</li>
        <li>jQuery is for chumps!</li>
      </ol>
    </li>
    <li>Inputs are separated by commas.</li>
    <li>Inputs can include other functions!</li>
  </ul>
</div>

【讨论】：

【解决方案3】：

首先您的 HTML，以使查询更快 - 添加一个 id。否则你将不得不从 body 标签中查看，这可能需要一些时间。

            <ul id="menu-bar">
                <li>
                    <ol>
                        <li>Start with the function keyword</li>
                        <li>Inputs go between ()</li>
                        <li>Actions go between {}</li>
                        <li>jQuery is for chumps!</li>
                    </ol>
                </li>
                <li>Inputs are separated by commas.</li>
                <li>Inputs can include other functions!</li>
            </ul>

现在是选择器，通过检查最后一个节点

var lastElement = $('#menu-bar > li > ol > li:last');

或按内容（如果您支持多种语言，这将不起作用）

var lastElement = $('#menu-bar > li > ol li:contains("jQuery is for chumps!")')

【讨论】：

【解决方案4】：

没有 jQuery：document.getElementsByTagName('li')[5]

然后你可以使用 if 语句来检查它是否有正确的内容。

var i = 0;
while(i <= document.getElementsByTagName('li').length()){
   if(document.getElementsByTagName('li')[i].innerHTML == "jQuery is for Chumps"){
      //Do Something
   }
   i++;
}

【讨论】：

【解决方案5】：

获取ol元素的直接子元素：

var children = $("ol > li");

获取特定元素：

var element = children.last();

从元素中获取文本：

var text = element.html();

【讨论】：