Получить текст, окружающий соответствующий элемент в jQuery

Question

В следующем HTML ...

<p>abc<span class='blue'>def</span>ghi</p>

... Я хочу получить символ текста, непосредственно предшествующий элементу span (в данном случае буква c ). Предположим, что строка между тегами p имеет произвольное содержимое и длину, и что элемент span может находиться где угодно между тегами p. Если открывающий тег p находится рядом с открывающим тегом span, должна быть возвращена пустая строка.

Есть ли удобный способ получить такое с помощью jQuery?

Answer 1

Вы можете использовать:

var prevLetters = $('span.blue')[0].previousSibling.nodeValue,
    lastLetter = prevLetters.substring(prevLetters.length - 1);

var prevLetters = $('span.blue')[0].previousSibling.nodeValue;

var lastLetter = prevLetters.substring(prevLetters.length - 1);
console.log(lastLetter);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>abc<span class='blue'>def</span>ghi</p>

JS Fiddle demo .

Он находит все элементы, соответствующие селектору, а затем, используя нотацию [0], переключается на узел DOM (а не объект jQuery) и выбирает предыдущего родного брата (a textNode) и находит его nodeValue.

Затем он изменяется, используя substring(), чтобы дать только последнюю букву.

<ч />

Отредактировано : для соответствия требованию пустой строки, если тег span является первым потомком родителя:

var prevLetters, lastLetter;
if ($('span.blue')[0].previousSibling) {
    prevLetters = $('span.blue')[0].previousSibling.nodeValue;
    lastLetter = prevLetters.substring(prevLetters.length - 1);
}
else {
    lastLetter = '';
}

var prevLetters, lastLetter;
if ($('span.blue')[0].previousSibling) {
  prevLetters = $('span.blue')[0].previousSibling.nodeValue;
  lastLetter = prevLetters.substring(prevLetters.length - 1);
} else {
  lastLetter = '';
}
console.log(lastLetter);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span class='blue'>def</span>ghi</p>

JS Fiddle demo .

<ч />

Отредактировано и превращено в функцию:

function prevLetter(elem){
    if (!elem){
        return false;
    }
    else {
        var prevLetters, lastLetter;
        if (elem.previousSibling){
            prevLetters = elem
                .previousSibling
                .nodeValue;
            lastLetter = prevLetters
                .substring(prevLetters.length-1);
        }
        else {
            lastLetter = '';
        }
    }
    return lastLetter;
}

var lastLetter = prevLetter($('span.blue')[0]);

function prevLetter(elem) {
  if (!elem) {
    return false;
  } else {
    var prevLetters, lastLetter;
    if (elem.previousSibling) {
      prevLetters = elem
        .previousSibling
        .nodeValue;
      lastLetter = prevLetters
        .substring(prevLetters.length - 1);
    } else {
      lastLetter = '';
    }
  }
  return lastLetter;
}

var lastLetter = prevLetter($('span.blue')[0]);
console.log(lastLetter);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>abc<span class='blue'>def</span>ghi</p>

JS Fiddle demo .

И, наконец, чистый ответ JavaScript, который меняет селектор с селектора jQuery, используя document.querySelectorAll(), где это возможно, на селектор DOM, использующий напрямую document.querySelectorAll() (весь другой код остается таким же, как в функции выше):

var lastLetter = prevLetter(document.querySelectorAll('span.blue')[0]);
console.log(lastLetter);

// or:
var lastLetter = prevLetter(document.querySelector('span.blue'));
console.log(lastLetter);

Ключевое различие между двумя последними состоит в том, что querySelectorAll() возвращает коллекцию элементов, независимо от того, имеет ли эта коллекция ни одного, один или несколько элементов, - и, следовательно, требует использования индекса для извлечения определенного элемента, тогда как querySelector() возвращает только один & ndash; первый & ndash; соответствующий узел или null, если не найдено ни одного соответствующего узла.

Ссылки:

• nodeValue.
• previousSibling.
• substring().

Answer 2

Вот пример ожидаемого решения для jsfiddle :

Код, как показано ниже:

var all=$("p").text(); // everything inside <p>
var sub=$("span ").text(); // everything inside <span>
var pos= all.indexOf(sub)-1; // place of just letter before span
alert(all[pos]);​