Использование jquery closest() и find() для возврата фактического элемента HTML

#javascript #jquery #ecmascript-6

Вопрос:

У меня есть элемент следующего типа ниже на моей веб-странице HTML.

 <div class="form-group>
    <div class="car">
        <div class="carIventory carDescription" contenteditable="true">This is car # 1</div>
    </div>
    <div class="tool">
        <button>Select me!</button>
    </div>
</div>

Их много в зависимости от того, сколько автомобилей отображается одновременно.

Когда я нажимаю кнопку Select me! , я использую closest() и find() получаю ближайший <div> с классом carDescription .

Запись его в консоль с помощью этого кода:

 var $element = $(e.target).closest('.form-group').find('.carDescription');
console.log("carDescription ", $element);

выдает это:

 jQuery.fn.init [div.carIventory.carDescription, prevObject: jQuery.fn.init(1)]

Но если я использую этот код вместо:

 const $element = document.querySelector('.carDescription');
console.log("carDescription ", $element);

Я получаю нужный формат:

 <div class="carIventory carDescription" contenteditable="true">This is car # 1</div>

Есть ли способ использовать closest() и find() возвращать фактический элемент HTML, как querySelector() это делает?

Спасибо!

1. Вы можете видеть в jQuery, что первый элемент в массиве является вашим элементом DOM, поэтому вы можете просто использовать $element[0]

2. В вашем коде jquery есть $element представление этого элемента в jquery, поэтому вы получаете jquery.nf.init out . Вы можете либо использовать jquery, например console.log("carDescription ", $element.text()); , либо преобразовать его в узел DOM, используя $element[0] что-то вроде console.log("carDescription ", $element[0].innerHTML); — лично я бы придерживался jquery (отсюда и «что-то вроде»)

3. @freedomn-m спасибо! text() показывает мне содержимое <div> , подобное этому: This is car # 1 . Но он не показывает мне фактические элементы HTML, такие как формат, который мне нужен выше.

4. Зачем использовать jQuery, если вам нужен DOM?

5. Тогда $lement[0].outerHTML ?

Ответ №1:

Вы видите консоль, показывающую элемент DOM. В зависимости от отладчика браузера они выводят разные вещи. В вашем случае вы видите объект jQuery, а не ссылку на DOM.

Если вы хотите использовать DOM, который вы используете .get(0) , или [0] ссылаться на элемент DOM из объекта, подобного массиву jQuery.

 var $element = $(e.target).closest('.form-group').find('.carDescription');
console.log("carDescription ", $element.get(0));
console.log("carDescription ", $element[0]);

Или просто используйте современные методы DOM и пропустите jQuery все вместе.

 var element = document.querySelector(e.target).closest(".form-group").querySelector('.carDescription');
console.log(element);

Ответ №2:

Используйте так

 var $element = $(e.target).closest('.form-group').find('.carDescription');
console.log("carDescription ", $element.parent().html());

Это даст вывод HTML.