Попытка добавить элемент select

ProgramBox

Попытка добавить элемент select

Post author:admin
Запись опубликована:27 мая, 2023
Post category:Вопросы по программированию

#jquery #html #bookmarklet

#jquery #HTML #букмарклет

Вопрос:

Я пытаюсь добавить <select> внутри определенного div, который имеет класс, который является общим для 3 divs. Это код

 <div id="producer_section_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_" class="section_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_ last_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">
    <div class="field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">
        <fieldset>

            <span id="producer-name" class="input_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_"></span>
        </fieldset>
    </div>
    <div class="field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">
        <fieldset>
            <label for="producer-number">Producer Number</label>
            <span id="producer-number" class="input_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">623886</span>
        </fieldset>
    </div>
    <div class="field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">
        <fieldset>
            <label for="producer-phone">Phone Number</label>
            <span id="producer-phone" class="input_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">(888) 407-7044</span>
        </fieldset>
    </div>
    <div class="field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_ last_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">
        <fieldset>
            <label for="producer-email">Email Address</label>
            <span id="producer-email" class="input_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_">MEDICARE@EHEALTHINSURANCE.COM</span>
        </fieldset>
    </div>


</div>

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

 var addSelect = "<select>
Checkcheck</select>";

$('#producer_section_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_ .field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_last_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_' ).append(addSelect);

1. «идентификатор, который используется совместно тремя подразделениями» пожалуйста, исправьте это, это вызывает у меня неловкость. :3

2. Например, изменить идентификатор этого? хотел бы я это сделать. У меня не было бы этой проблемы, если бы программист не использовал имена повторно. У меня нет доступа к исходному коду, поэтому все, что я могу сделать, чтобы облегчить себе жизнь, — это изменить качество жизни с помощью создаваемого мной расширения. На самом деле я андеррайтер, лол

3. О, понятно; я думал, вы имели в виду 3 divs, показанные в вашем коде с одинаковыми КЛАССАМИ, так что это была бы опечатка.

4. У вас не может быть новой строки в строковом литерале. addSelect Действительно ли это определено таким образом?

Ответ №1:

Если присмотреться, этот последний элемент на самом деле имеет два класса, а не один. Вот почему ваш селектор не работает.

Также, по-видимому, эти классы, вероятно, генерируются автоматически, поэтому я бы не зависел от них.

Возможно, лучшим подходом было бы нацелиться на producer-email диапазон, а затем запросить его родительский элемент.

Что-то вроде (непроверено):

 $('#producer-email').parent().append(addSelect);

Редактировать:

Чтобы настроить таргетинг на родительский, div а не на fieldset , как вы хотели, вы можете использовать closest('div') это, пройдется по DOM вверх и найдет и вернет первый div .

Таким образом, полный код был бы (непроверенным):

 $('#producer-email').closest('div').append(addSelect);

1. Есть ли какой-либо способ настроить таргетинг на родительский элемент этого родителя? И мне нравится ваш ответ, забавно, что длинные имена не были сгенерированы автоматически. тот, кто создал этот веб-сайт, сделал это десять лет назад, и они разработали эти соглашения об именовании. Действительно раздражает пошаговое выполнение их кода.

2. Вы могли бы использовать closest('div') это, пройдется по DOM вверх и найдет и вернет первый div . Таким образом, полный код был бы (непроверенным): $('#producer-email').closest('div').append(addSelect);

3. Это помогло, большое спасибо. Это ставит select в более выгодное положение для пользователя. Если вы могли бы отредактировать свой ответ, чтобы отразить это, я отмечу его.. И вы, и Sharlike ответили на вопросы, есть ли способ отметить оба и получить альтернативные ответы?

4. @BrandenHam Ты знаешь, что мог бы проголосовать за них, если бы нашел их полезными 🙂

Ответ №2:

Вам не хватает . в вашем селекторе между двумя классами:

 $('#producer_section_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_ .field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_.last_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_' ).append(addSelect);

В качестве альтернативы вы могли бы использовать следующее, чтобы извлечь последний div из набора:

 $('#producer_section_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_ .field-row_ns_Z7_MH8C1H40JOBA50AA7D2DGU00G4_:last' ).append(addSelect);