Question

我似乎无法弄清楚如何通过文本获取兄弟元素。这就是我目前所拥有的：

var elem = $('div');
var e = elem.siblings('.condition').contains('text');

Answer 1

jQuery没有<aui:nav>方法可以按预期工作。相反，您需要使用contains()选择器。试试这个：

:contains

如果需要，您还可以在选择器中连接变量：

var $elem = $('div');
var $e = elem.siblings('.condition:contains("text")');
console.log($e.length); // will be greater than 0 if an element was matched

根据@DavidThomas的建议，您可以使用var foo = 'bar'; var $e = $elem.siblings('.condition:contains("' + foo + '")');：

filter()

Answer 2

:contains选择器可以完成您需要的所有操作：

var elem = $('div');
elem.siblings(".condition:contains('text')");

Answer 3

$('div').siblings(':contains("text here")');

http://codepen.io/anon/pen/obodJB

Answer 4

当您使用JavaScript和jQuery标签发布此问题时，我认为我会花时间提供JavaScript解决方案（尽管您已经接受了jQuery解决方案）。请记住，目前这对于那些包含ECMAScript 6的浏览器来说是受限制的：

// 'start' : Node, NodeList, HTMLCollection, Array of Nodes
//           The nodes whose siblings you're searching for
// 'needle': String, the text-content you're looking to select
//           sibling nodes by.

function getSiblingsByTextContent(start, needle) {

  // converting the supplied start variable into an Array:
  var allStarts = Array.from(start),

  // Using the spread operator ('...') to create a new Set
  // of the unique array elements from the new array
  // formed from Array.prototype.map(); here we use
  // an Array function to return the parentNode of n (the
  // node from the allStarts Array):
    uniqueParents = [...new Set(allStarts.map(n => n.parentNode))],

    // here we iterate over the uniqueParents Array, and form
    // a new Array, using Array.prototype.map() again:
    allSiblings = uniqueParents.map(function(n) {
    // n is the current array-element from the array
    // over which we're iterating.

    // converting the children of the node, using
    // Array.prototype.filter():
      return Array.from(n.children).filter(function(nc) {
      // here we keep only those nodes (here 'nc') that
      // are not contained within the AllStarts array, and
      // whose textContent contains the needle we're searching for:
        return allStarts.indexOf(nc) === -1 && nc.textContent.match(needle);
      });
      // we reduce the returned array of arrays, with
      // Array.prototype.reduce, combining each Array
      // element with the array that precedes it,
      // intialising with an Array literal ('[]')
    }).reduce((a,b) => a.concat(b), []);

    // and returning the found-siblings to the calling
    // context:
  return allSiblings;
}

// calling the named function, suppling a NodeList of
// span elements found in the document, searching for
// siblings containing the '-' character:
getSiblingsByTextContent(document.querySelectorAll('span'), '4')
// as the function returns an Array we can iterate over that
// Array using Array.prototype.forEach() to add a new
// class to each element's classList to show the found-
// siblings:
.forEach(n => n.classList.add('found'));

＆＃13;

// 'start' : Node, NodeList, HTMLCollection, Array of Nodes
//           The nodes whose siblings you're searching for
// 'needle': String, the text-content you're looking to select
//           sibling nodes by.

function getSiblingsByTextContent(start, needle) {

  // converting the supplied start variable into an Array:
  var allStarts = Array.from(start),

    // Using the spread operator ('...') to create a new Set
    // of the unique array elements from the new array
    // formed from Array.prototype.map(); here we use
    // an Array function to return the parentNode of n (the
    // node from the allStarts Array):
    uniqueParents = [...new Set(allStarts.map(n => n.parentNode))],

    // here we iterate over the uniqueParents Array, and form
    // a new Array, using Array.prototype.map() again:
    allSiblings = uniqueParents.map(function(n) {
      // n is the current array-element from the array
      // over which we're iterating.

      // converting the children of the node, using
      // Array.prototype.filter():
      return Array.from(n.children).filter(function(nc) {
        // here we keep only those nodes (here 'nc') that
        // are not contained within the AllStarts array, and
        // whose textContent contains the needle we're searching for:
        return allStarts.indexOf(nc) === -1 && nc.textContent.match(needle);
      });
      // we reduce the returned array of arrays, with
      // Array.prototype.reduce, combining each Array
      // element with the array that precedes it,
      // intialising with an Array literal ('[]')
    }).reduce((a, b) => a.concat(b), []);

  // and returning the found-siblings to the calling
  // context:
  return allSiblings;
}

// calling the named function, suppling a NodeList of
// span elements found in the document, searching for
// siblings containing the '-' character:
getSiblingsByTextContent(document.querySelectorAll('span'), '4')
  // as the function returns an Array we can iterate over that
  // Array using Array.prototype.forEach() to add a new
  // class to each element's classList to show the found-
  // siblings:
  .forEach(n => n.classList.add('found'));

＆＃13;

div div::before,
div span::before {
  content: '( ';
}
div div::after,
div span::after {
  content: ' )';
}
.found {
  font-weight: bold;
  color: limegreen;
}

＆＃13;

<div>
  <span>1 - span</span>
  <span>2 - span</span>
  <span>3 - span</span>
  <div>4 - div</div>
  <span>5 - span</span>
  <span>6 - span</span>
  <span>7 - span</span>
</div>
<div>
  <span>8 - span</span>
  <span>9 - span</span>
  <span>10 - span</span>
  <div>11 - div</div>
  <span>12 - span</span>
  <span>13 - span</span>
  <span>14 - span</span>
</div>

＆＃13;

JS Fiddle demo

参考文献：

如何通过文字获得兄弟姐妹？

4 个答案: