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

Question

I can't seem to figure out how to get a sibling element by text. This is what I currently have:

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

Answer 1

jQuery has no contains() method which works as you expect it to. Instead you need to use the :contains selector. Try this:

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

You can also concatenate a variable in the selector if required:

var foo = 'bar';
var $e = $elem.siblings('.condition:contains("' + foo + '")');

And as suggested by @DavidThomas you could use filter() :

var $e = $elem.siblings().filter(function() {
    return $(this).text() == 'text';
});

Answer 2

the :contains selector should do everything you need:

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

Answer 3

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

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

Answer 4

As you posted this question with both JavaScript and jQuery tags, I thought I'd take the time to offer a JavaScript solution (although you've already accepted a jQuery solution). Bearing in mind this is currently restricted, realistically, to those browsers incorporating 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'));

 // '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')); 

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

 <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> 

JS Fiddle demo .

References:

• Array.from() .
• Array.prototype.concat() .
• Array.prototype.filter() .
• Array.prototype.forEach() .
• Array.prototype.indexOf() .
• Array.prototype.map() .
• document.querySelectorAll() .
• Element.classList.add() .
• ParentNode.children .
• Set() .
• Spread Operator ( ... ) .
• String.prototype.match() .