Выбор из списка по значению

#javascript #html #jquery #html-lists

#javascript #HTML #jquery #html-списки

Вопрос:

Предположим, у меня есть следующий фрагмент HTML:

 <b>Question 1: How do you feel today?</b>
<ul>
    <li id = '1'>happy</li>
    <li id = '2'>sad</li>
    <li id = '3'>angry</li>
</ul>

<b>Question 2: How does your dog feel today?</b>
<ul>
    <li id = '4'>happy</li>
    <li id = '5'>sad</li>
    <li id = '6'>angry</li>
</ul>
 

А затем следующий Jquery

 emotion_id = $('li:contains('happy')).attr('id'))
 

Как я могу сосредоточиться только на извлечении из списка вопросов 1? в этом примере я хочу установить emotion_id = 1

Комментарии:

1. В любом случае это было бы только первое совпадение. Другими словами, то, что вы опубликовали, работает (помимо неправильного использования кавычек).

2. есть ли способ добавить класс в тег ul? или тег il? и искать его таким образом?

Ответ №1:

Вместо использования UL и LI Почему бы не использовать

 var form = document.querySelector("form");
var log = document.querySelector("#log");

form.addEventListener("submit", function(event) {
  var data = new FormData(form);
  var output = "";
  for (const entry of data) {
    output = output   entry[0]   "="   entry[1]   "r";
  };
  log.innerText = output;
  event.preventDefault();
}, false); 
 <form> 
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1"
           name="contact" value="email">
    <label for="contactChoice1">Email</label>
    <input type="radio" id="contactChoice2"
           name="contact" value="phone">
    <label for="contactChoice2">Phone</label>
    <input type="radio" id="contactChoice3"
           name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
<pre id="log">
</pre>