Какой из селекторов будет оптимальнее, в плане производительности?

jQuery для выборки элементов использует библиотеку Sizzle. Эта библиотека разбирает переданную строку и для простых случаев использует стандартные функции get*By*, либо, в случае поддержки использует querySelectorAll.

Можно рассмотреть, что именно происходит в первом и втором случаях.

Первый случай:

1. $('.kb-content'); - выборка всех элементов с классом kb-content
2. content.each(function () { - проход по каждому элементу
3. if ($(this).data('parent-id') === targetId) { - создание объекта jQuery, обращение к data, сравнение с параметром
4. $(this).toggleClass('hidden'); - создание объекта jQuery, смена класса

Второй случай:

1. $('.kb-content[data-parent-id="' + targetId +'"]') - выборка элементов с классом kb-content у которых атрибут data-parent-id - имеет соответствующее значение
2. .toggleClass('hidden'); - проход по каждому элементу и смена класса

Можно заметить как минимум два отличия:

1. разное количество элементов в выборке
2. отсутствие дополнительного условия.

Таким образом, если среди элементов с классом kb-content элементов с требуемым атрибутом будет сильно меньше, то вариант с выборкой по атрибуту будет выполняться быстрее, в силу того, что таких элементов будет меньше.

Также на скорость влияет множественное создание объектов jQuery.

Пример тестов, подтверждающих рассуждения выше.