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

Question

我试图访问一个元素的id，并切断num以拼成ajax调用的url。我主要使用JQuery。

我与.attr（）和。数据（）进行实验，发现他们只返回了第一场比赛，所以每次它会1，不管我点击了1,4或54

.get（）只返回HTML标头对象，我还没有找到一种方法来访问它，并可能拉出一个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倍以上你会得到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的响应