javascript - 需要一种方法从许多相同元素之一获取 attr

Question

我正在尝试访问一个元素的 id，并切掉 num 以拼凑出一个用于 ajax 调用的 url。我主要使用JQuery。

我尝试过 .attr() 和 .data() ，发现它们只返回第一个匹配项，所以每次都会返回 1，无论我点击 1、4 还是 54。

.get() 只返回 HTML header 对象，我还没有找到访问该对象并可能提取 id 编号的方法。

代码:

$('.display').click(function(event) {
    event.preventDefault();
    //get category from h4's parent div
    let $parent = $('h4').parent();
    let $cat = $parent.attr('class');
    let cat = String($cat);
    //get id to search for...currently only returning id_1, not unique id
    let $id = $('h4').get();  //need correct method here
    console.log($id);
    //slice off num to use in ajax url req
    if($id.length == 4) {
        id_num = $id.slice(-1) + '/';
    } else if ($id.length == 5) {
        id_num = $id.slice(-2) + '/';
    } else {
        id_num = $id.slice(-3) + '/';
    }
    console.log(id_num);

    $.ajax({
        type: 'GET',
        url: 'https://swapi.co/api/' + $cat + id_num,
        success: function(result) {
            console.log(result);
        }
    })

    <div class="container">
        <h3 id="title">I made the Kessel Run in 12 parsecs.</h3>
            <form id ="searchParams" method="POST">
            Now, I want to know about the
            <input list="cats" name="cats">
            <datalist id="cats">
                <option id="people" value="people"></option>
                <option id="planets" value="planets"></option>
                <option id="films" value="films"></option>
                <option id="species" value="species"></option>
                <option id="vehicles" value="vehicles"></option>
                <option id="starships" value="starships"></option>
            </datalist>
            in Star Wars.
           <input id="getInfo" type="submit">
          </form>
          <div class="display"></div>
        </div>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/twelveparsecs.js"></script>
    </body>
</html>

谢谢!

Answer 1

您的 JavaScript 无法正确匹配 html 代码片段，它以第 2 行的失败开始

let $parent = $('h4').parent();  
// never matches on your code, you have no h4 tag
let $cat = $parent.attr('class'); 
// attr is no function of undefined, null pointer exception

获取 id 的方式可以是这样；

<div id="test">

<script>
  console.log($('div').attr('id'));
</script>

如果给定标签超过 1 次，您将返回与 $('div') 选择器节点匹配的 JQuery 对象数组:

<div id="1">a</div>
<div id="2">b</div>

<script>
  let listOfElements = $('div');
  for(var i = 0; i < listOfElements.length; i++) {
    var singleElementInList = $(listOfElements[i]);
    var id = singleElementInList.attr('id');
    console.log(id);
  }
</script>

get 命令是一个 ajax 调用，用于快速读取 url 的响应