时间戳

首页 > 解决方案 > 哪个元素包含#id idString 返回索引

javascript - 哪个元素包含#id idString 返回索引

问题描述

具有“列”类的多个元素。查找哪个列元素包含一个 id: idString，返回 !column! 的索引！包含 id

这是我正在搜索的新（第 3 个）html：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta name="generator" content="Amazon.com">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css" class="dontsplit">       .column *{ padding: 20px; }
    </style>
</head>
<body class="calibre" style="margin: 0px; padding: 0px; width: 101024px;">
<div class="calibre67">
    <div class="last first column" style="width: 616px; float: left;">
        <p class="calibre2" style="padding-top: 8px; padding-bottom: 8px;">
            <span class="calibre3">bla , bla etc.</span> 
        </p>
    </div>
    <div class="column" style="width: 616px; float: left;">
        <div class="calibre1 split">
            <p class="calibre2" style="padding-top: 8px; padding-bottom: 8px;">
                <span class="calibre3">bla bla etc.</span> 
            </p>
        </div>
    </div>
<!-- div contains the ID I want to find, structure of page varies with different files -->
    <div class="column" style="width: 616px; float: left;">
        <div class="calibre1 split">
            </p>
            <p class="calibre4" style="padding-top: 8px; padding-bottom: 8px;">
<!-- This is the id I want to find, so the function should return 2 (3rd column).  -->
                <span id="1P-09761e033cf14df8aeccf069ebe7886e" class="calibre6">Prologue:</span> 
            </p>
            <p class="calibre5" style="padding-top: 8px; padding-bottom: 8px;">
                <span class="calibre6">It had been bla, bla etc.</span> 
            </p>
        </div>
    </div>
</div>
</body>
</html>

我的代码：

var idString = "O-09761e033cf14df8aeccf069ebe7886e";

function findID(idString) {
    $(".column").each(function(index, element){
                if ($(this).find('*').attr('id') == idString) {
                        console.log(index);
                        return index;
                }
    });
    return;
}

var result = findID(idString);

// should return/log 2
// currently returns/logs nothing

在此示例中，函数应返回 2。我已经尝试了很多你的建议组合。

我究竟做错了什么？

标签： javascriptjquery

解决方案

if ($idString)总会回来true的。而不是那个检查，你会想要检查.attr()每个元素的if ($(this).attr('id') == idString).

请注意，该属性实际上并不包含#，因此您需要#从 ID 变量中删除 ，或使用.contains().

这可以在下面看到：

var idString = "O-09761e033cf14df8aeccf069ebe7886e";

function findID(idString) {
  $(".column").each(function(index, element) {
    if ($(this).attr('id') == idString) {
      console.log(index);
      return index;
    }
  });
  return;
}

findID(idString);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="column">“When the grav emitters are charged"</p>
<p class="column">“It wasn’t that bad this time”&lt;/p>
<p class="column" id="O-09761e033cf14df8aeccf069ebe7886e">Chapter 1</p>
<p class="column">“I can monitor engineering from up here”&lt;/p>

另请注意，索引是从零开始的。

推荐阅读